搜索框的CSS修改

Question

我做这个搜索框在我的网站：

http://codepen.io/betacoding/pen/JKkJqY

，我想使它一些更新：

1. 使搜索框里面的图标按钮为搜索工作
2. 调整搜索框的高度

我试着调整使用搜索框的高度：

padding: 5px 20px 5px 30px; 

，并使得为5px到15px的，但在我的Mozilla浏览器中的文字变得非常小并且在框的大小没有增加。在其他浏览器中，它工作正常。

而且，如果它只能在CSS和HTML中实现没有JavaScript或jQuery它将是完美的。

Answer 1

要使用图标，按钮，你必须改变它在输入（提交）

<input type='text' id="pto_searchbox" name='pto_q' value="%PTO_Q%" placeholder="Looking For A Handbag?" /> 
<input type='submit' class='imgSearch' value='' /> 
<input type='submit' class="btn" value='Search' /> 

改变你的CSS来

#pto_searchbox { 
    width: 50%; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 10px; 
    font-size: 20px; 
    padding: 5px 20px 5px 30px; 
    -webkit-transition: width 0.4s ease-in-out; 
    transition: width 0.4s ease-in-out; 
} 
.imgSearch{ 
    border: 0; 
    height: 30px; 
    width: 30px; 
    background-color: #FFFFFF; 
    margin-left: -40px; 
    margin-bottom: 7px; 
    vertical-align: middle; 
    background-image: url('http://s31.postimg.org/vooqzqba3/toolbar_find_1.png'); 
    background-repeat: no-repeat; 
} 

大小问题不清楚，你的笔看起来有些在任何浏览器（甚至改变填充）

如果你想改变你的搜索高度，只需将更大的高度添加到CSS，例如

#pto_searchbox { 
    height: 60px; 
    width: 50%; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 10px; 
    font-size: 20px; 
    padding: 5px 20px 5px 30px; 
    -webkit-transition: width 0.4s ease-in-out; 
    transition: width 0.4s ease-in-out; 
} 

而且它的外观在Mozilla，Chrome和IE

Here a working pen