是否可以設置[input]標簽的樣式？

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

外觀屬性是您要尋找的。

外觀屬性用於基於用戶操作系統主題使用平台本機樣式顯示元素。

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

CSS-Tricks上有一篇非常有用的文章 。