CSS填充文本字段

我想垫占位符文本的底部区域，因为它太靠近线内的占位符文本。但我不确定什么属性会起作用。这是我的CSS。另外，另一个问题是，当我在Firefox上打开它时，放大图标比线条高出大约1个像素。在铬上看起来很好。有人知道吗？

谢谢。

.search_input{ 
    font-family: Helvetica; 
    font-size:14px; 
    border:1px solid #000000; 
    border-top:1px; 
    border-right: -0px; 
    border-left: 0px; 
    margin-left: 3px; 
    margin-right: -23px; 
    margin-top: 6px; 
    width: 150px; 
    box-sizing: border-box; 
} 

#tfnewsearch input:focus { 
    outline: 0; 
    background: #fff; 
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; 
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; 
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset; 
} 

#tfnewsearch input::-webkit-input-placeholder { 
    color: #999; 
    font-size: 17px; 
    padding-bottom:3px; 
    height: 19px; 
} 

#tfnewsearch input:-moz-placeholder { 
    color: #999; 
    font-size: 17px; 
    padding-bottom:3px; 
} 

#tfnewsearch input:-ms-input-placeholder { 
    color: #999; 
    font-size: 17px; 
    padding-bottom:3px; 
} 

.t_button { 
    outline: none; cursor: pointer;margin-bottom: -5px; margin-left: 22px;margin-right: 1px; border: solid 1px #000000; border-top:0px; border-left: 1px; border-right: 1px; 
}

<form id="tfnewsearch" method="get" action="index.php"> 
    <input type="text" class="search_input" name="q" size="17" maxlength="120" placeholder="Search" required><img src="imgs/icon_search.gif" value="search" class="t_button"> 
</form>

来源

2014-01-08 user826323

尝试使用padding to .search_input

.search_input{ 
    font-family: Helvetica; 
    font-size:14px; 
    border:1px solid #000000; 
    border-top:1px; 
    border-right: -0px; 
    border-left: 0px; 
    margin-left: 3px; 
    margin-right: -23px; 
    margin-top: 6px; 
    width: 150px; 
    box-sizing: border-box; 
    padding-bottom:5px; 
}

http://jsfiddle.net/yZXSJ/

来源

2014-01-08 05:35:13 radha

谢谢，它的工作原理。但是当我增加字体大小时，文本'搜索'在底部被切断了。 – user826323

看到这个链接http://jsfiddle.net/yZXSJ/1/。工作正常。 – radha

CSS填充文本字段

回答

相关问题