Question

是否有可能为<input>标记设置样式？
我写的：

<li><form>
    <input class="search" name="s" type="search" placeholder="Search...">
    <input type="submit" value=">
</form></li>

造型：

form{
        height: 40px;
}

.search{
        border: none;
        background-color: #7e7376;
}

input[type=search]{
        font-family: 'Overpass';
        font-weight: bold;
        color: #2c2729;
        margin-top: 4px;
        padding: 10px 15px;
        height: 12px;
}

在各种浏览器上看起来非常不同。我尝试应用一些重置CSS，但这没有帮助。我正在构建菜单栏，搜索框需要看起来像它的一部分。对此有何帮助？

Answer 1

如果您使用的是webkit浏览器，则可以添加-webkit-appearance: none。这将删除默认的浏览器样式。您可能还想删除轮廓，边框和背景。

Answer 2

appearance property正是您要找的。

外观属性用于使用基于用户的平台本地样式显示元素。操作系统的主题。

input {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

CSS-Tricks has a very useful article about it

是否有可能设置[输入]标签的样式？

2 个答案: