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修改

1 个答案: