使用jQuery，Javascript或CSS在輸入框中垂直對齊文本光標（插入符號？）

我在CSS中的輸入框上混淆了CSS，使文本更大，添加邊框，更改顏色等使用jQuery，Javascript或CSS在輸入框中垂直對齊文本光標（插入符號？）

我已經對齊了較大的文本，以便在我的輸入框中使用填充很好地匹配（垂直對齊），但閃爍的小文本光標非常對齊（擁抱底部）。我想知道是否有方法可以自行調整閃爍的文本光標而不會搞亂文本的位置。

謝謝！馬特

繼承人的CSS：

div#search_box { 
    height:32px; 
    width: 366px; 
    float:left; 
    margin-left:86px; 
    margin-top:14px; 
    background-color: #ffffff; 
    border: 2px solid #b66b01; 
} 

input#search_input { 
    border:none; 
    position: relative; 
    float: left; 
    height: 32px; 
    width: 335px; 
    font-size: 18px; 
    padding-top: 9px; 
    padding-left: 4px; 
    outline-style:none; 
    font-family: Helvetica, Arial, "MS Trebuchet", sans-serif; 
    color: #5a5a5a; 
} 

div#search_icon { 
    width:22px; 
    height:24px; 
    float:right; 
    margin-right:5px; 
    margin-top:4px; 
    cursor: pointer; 
    background: url('images/magnifier.png'); 
}

HTML：

<div id="search_box"> 
    <input type="text" name="query" id="search_input" autocomplete="off"/> 
    <div id="search_icon"> 
</div>

結果：

search http://i26.tinypic.com/29lhjf9.png

來源

2009-07-31 Matt

向我們顯示代碼將會有所幫助。此外，這是否發生在不同的瀏覽器？ – Randell 2009-07-31 07:11:26

在其他瀏覽器中看起來不同，但沒有一個看起來很理想。這張照片來自firefox。 – Matt 2009-07-31 07:26:03

你的DOCTYPE是什麼？ – Alsciende 2009-07-31 09:15:42

你的問題是，你沒有考慮到填充輸入框，當你指定其高度。

您指定的是32px的高度，但是任何填充都會添加到該高度，所以輸入框的高度實際上是32 + 9 + 4 = 45px。光標垂直居中在45px高的輸入框中，但邊框位於32px高的div上。在搜索輸入中將「height：32px」更改爲「height：19px」，並且它可以正常工作。

我（非常喜歡）推薦使用Firebug。這對於弄清楚這些事情非常有用。

來源

2009-07-31 15:08:57

它看起來並不像你展示所有的CSS在你的例子中（有一個div或兩個邊界？），布你是否嘗試刪除height屬性並將padding-bottom設置爲padding-top的值（9px）？

來源

2009-07-31 07:47:29 ironsam

旁註：你不需要div#search_icon，您輸入的可能有以下背景：

background: white url('images/magnifier.png') no-repeat right NNpx;

來源

2009-07-31 09:03:57 FelipeAls

使用jQuery，Javascript或CSS在輸入框中垂直對齊文本光標（插入符號？）

回答

相關問題