搜索框 Css 修改

Question

我在我的网站上制作了这个搜索框：

我想对其进行一些更新：

将搜索框内的图标设为搜索按钮
调整搜索框的高度

我试过使用以下方法调整搜索框的高度：

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

搜索框 Css 修改

Search Box Css Modification

html

css

search-box