将输入框中的文本光标（插入符号？）与jQuery，Javascript或CSS垂直对齐 [英] Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS

问题描述

我在CSS中的输入框上搞乱了CSS，使文字更大，添加边框，改变颜色等。使用填充将较大的文本对齐到我的输入框中很好（垂直对齐），但闪烁的小文本光标非常对齐（拥抱底部）。我想知道是否有一种方法可以自行调整闪烁的文本光标，而不会弄乱文本的位置。

谢谢！
Matt

继承CSS：

  div＃ search_box {
 height：32px; 
 width：366px; 
 float：left; 
 margin-left：86px; 
 margin-top：14px; 
 background-color：#ffffff; 
 border：2px solid＃b66b01; 
} 
 
输入＃search_input {
 border：none; 
职位：亲属; 
 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; 
颜色：＃5a5a5a; 
} 
 
 div＃search_icon {
 width：22px; 
 height：24px; 
 float：right; 
 margin-right：5px; 
 margin-top：4px; 
光标：指针; 
 background：url（'images / magnifier.png'）; 
} 
  

HTML：

 < div id =search_box> 
< input type =textname =queryid =search_inputautocomplete =off/> 
< div id =search_icon> 
< / div> 
  

结果：

搜索http://i26.tinypic.com/29lhjf9.png

你的问题是，当你指定它的高度时，你没有考虑到输入框中的填充。

你指定的是32px的高度，但是任何填充都会被添加到该高度，所以你的输入框的高度实际上是32 + 9 + 4 = 45px。光标垂直居中在45px高的输入框中，但边框位于32px高的div上。在搜索输入中将'height：32px'更改为'height：19px'并且它可以工作。

我（非常喜欢）推荐使用 Firebug 。这对于弄清楚这些东西非常有用。

I'm messing with the CSS on an input box in CSS, to make the text bigger, adding a border, changing color, etc.

I've aligned the bigger text to fit nicely (vertically-aligned) within my input box using padding, but the little blinking text cursor is terribly aligned (hugs the bottom). I'm wondering if there is a way to adjust the blinking text cursor on its own without messing up the positioning of the text.

Thanks! Matt

Heres the 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>

Result:

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

解决方案

Your problem is that you're not taking into account padding on the input box when you're specifying its height.

You're specifying a height of 32px, but any padding gets added to that, so the height of your input box is actually 32 + 9 + 4 = 45px. The cursor is being vertically centered in the 45px tall input box, but your border is around the 32px tall div. Change 'height: 32px' to 'height: 19px' on the search input and it works.

I (very highly) recommend using Firebug. It's very useful for figuring out these sorts of things.

这篇关于将输入框中的文本光标（插入符号？）与jQuery，Javascript或CSS垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！