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填充文本字段

回答

相關問題