搜索框的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