검색 막대 입력이 지원되는 다른 언어로 작동하지 않습니다.

Question

두 언어를 지원하는 웹 사이트에 동일한 HTML/CSS 속성을 사용하고 있습니다. 검색 창은 영어로 잘 작동하지만 다른 언어로 변경하면 아무 것도 입력 할 수 없습니다.

웹 사이트 : http://barajon.com/store/

당신은 상단 메뉴에있는 녹색 깃발을 클릭하여 언어를 변경할 수 있습니다. 내가 .banner에서 position: relative 제거하면 작동

<!-- Header Search Begin --> 
<form class="h-search" method="post" action="search.php" name="productsearchform" onsubmit="javascript:return TXS_funcSubmitForm();" style="border-style: none; width: auto;"> 
    <fieldset> 
    <input type="hidden" name="simple_search" value="Y" /> 
    <input type="hidden" name="mode" value="search" /> 
    <input type="hidden" name="posted_data[by_title]" value="Y" /> 
    <input type="hidden" name="posted_data[by_descr]" value="Y" /> 
    <input type="hidden" name="posted_data[by_sku]" value="Y" /> 
    <input type="hidden" name="posted_data[search_in_subcategories]" value="Y" /> 
    <input type="hidden" name="posted_data[including]" value="all" />    

    <div class="srch-area"> 
     <input type="text" class="srch-fld" name="{if $TXS_search_id && $active_modules.Predictive_Search ne ""}{$TXS_search_id}{else}posted_data[substring]{/if}" id="TXS_PS_search" id="TXS_PS_search" value="{$search_prefilled.substring|escape}" /> 
     <input class="sbmit-btn" name="" value="Go" type="submit" /> 
     <div class="clear"></div> 
    </div> 
    <input type="hidden" name="txs_area" value="C" /> 
    </fieldset> 
</form> 
<!-- Header Search End --> 

Answer 1

텍스트 상자에 텍스트를 입력 할 수없는 이유는 텍스트 상자가 다른 DIV에 의해 다루어지고 있기 때문입니다. 텍스트 상자를 덮고있는 DIV 부분은 사용자에게 보이지 않습니다 (배경색이나 테두리가 있음을 나타냄).

텍스트 상자를 DIV 앞에 표시하려면 텍스트 상자의 z-index을 큰 숫자로 변경하십시오 (예 : 9999). z-index은 배치 된 요소에만 적용되므로 입력란의 position을 relative, fixed 또는 absolute으로 변경해야합니다.

특정 예로 텍스트 상자 자체 대신 텍스트 상자가 포함 된 div의 position 및 z-index을 설정하는 것이 좋습니다.

<div class="main-menu"> 

전체 사이트,이 문제가 해결됩니다 어느 쪽이든에 걸쳐 일관성을 달성하기 위해 더 좋은 생각이 될 것이다 클래스 main-menu 수정

<div class="main-menu" style="position:relative;z-index:9999;"> 

에 : 귀하의 경우에는 내가 줄을 변경합니다.

Answer 2

:

는

.banner{ 
    margin: 0; 
    padding: 10px 0; 
    display: block; 
} 

그 이유는 .banner에 대한 상대 위치를 사용하여이 를 이동하게되는 검색 창의

HTML.main-menu 이상 따라서 검색 필드를 클릭하면 아무 것도하지 않습니다. 기술적으로 검색 필드에서 을 클릭하지 않았습니다.

다른 수정 방법은 z-index이지만 실제로는 .banner의 상대적 위치를 변경하지 않으면 position: relative을 사용할 필요가 없다고 생각합니다.