css 填充文本字段内的占位符文本

Question

我正在尝试填充占位符文本的底部区域，因为它离线条太近了。但我不确定什么属性(property)会起作用。这是我的CSS。而且，另一个问题是，当我在 firefox 上打开它时，放大图标比线高大约 1 个像素。它在 chrome 上看起来不错。有人知道吗？

谢谢。

.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>

Answer 1

尝试使用 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/