将输入框中的文本光标(插入符号?)与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屋!