修復光標輸入

我有這個模板http://khine.3b1.org/search.html和在右側我有一個搜索輸入字段。修復光標輸入

問題在於光標位於背景圖像之前！

我該如何將它向右移動25px，以便它在search_icon.png圖片後面開始。 '.placeholder-field'似乎對我沒有任何幫助！

<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field --> 
    <table> 
    <tr> 
     <td> 
     <a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a> 
     </td> 

     <td> 
     <form action=";browse_content" method="get"> 
      <div class="search placeholder-field"> 
      <input name="search_text" type="text"> 
      <input value="Search" class="button" type="submit"> 
      </div> 
     </form> 
     </td> 
    </tr> 
    </table> 
</div>

這裏是CSS：

/************************************************************************** 
* Search 
**************************************************************************/ 
#topsearch { 
    display: inline-block; 
    margin: 3px 0 0 0; 
} 

#topsearch .advanced-search { 
    display: inline-block; 
    float:right; 
    margin:0 3px 0 0; 
    width: 16px; 
    height: 16px; 
    text-indent: -9999px; 
    background: url('/ui/core/resources/advanced_search_icon.png') 0 0 no-repeat; 
    opacity: .2; 
} 

#topsearch .search input { 
    font-size: 100%; 
    width: 90%; 
    padding: 5px 2px; 
    border: 1px solid #DDD; 
    border-top-color: #CCC; 
    border-bottom-color: #EAEAEA; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background: url('/ui/core/resources/search_icon.png') 5px 50% no-repeat white; 
} 

.placeholder-field { 
    left: 25px; 
} 
#topsearch form input.button { 
    display: none; 
}

我失去了什麼？

有沒有一種方法來改善模板，使其更加流暢？

千恩萬謝

來源

2011-11-25 khinester

簡單地減少輸入寬度並添加padding-留在你的輸入像這樣：

#topsearch .search input { 
    padding: 5px 2px 5px 25px; 
    width: 75%; 
}

來源

2011-11-25 12:12:41 Leo

謝謝，但如果將光標放在搜索框中並開始鍵入，則文本位於背景圖像的頂部，我想將其移至右側。 – khinester

所以我如何使輸入文本在 – khinester

開始25px對不起，我有一個錯字。它是25px，而不是5px。現在應該工作。 – Leo

我固定它：

#topsearch form input.button{ 
    cursor: pointer; 
    height: 30px; 
    position: absolute; 
    right: 150px; 
    width: 30px; 
    display:block 
}

您還必須刪除輸入的值屬性：

<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">

來源

2011-11-25 11:14:34

對不起，但這不起作用！ – khinester

@khinester好吧，我編輯了我的答案。再試一次，讓我知道它是否有效。 –

沒有抱歉，這是我得到http://khine.3b1.org/search1.html對CSS的更改是http://khine.3b1.org/ui/phoenix/style1.css – khinester

修復光標輸入

回答

相關問題