css - 仅删除搜索字段周围的边框

Question

我正在尝试移除单个搜索框周围讨厌的边框，而不是所有文本/输入字段。

我认为这是罪魁祸首 -

input[type=text],
input[type=email],
input[type=password],
textarea {
    background:none;
    border: 1px solid #ddd;
    padding:14px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

为了补救，我试过(无济于事)-

#searchform #s {
    border: none !important;
}

是否有更好的(即有效的)方法来实现这种效果？我想保留所有其他文本/输入字段的边框，只删除单个搜索字段..

Live site.

Answer 1

在这种情况下，您不需要使用 !important。甚至，可能不需要使用 #searchform #s 因为 #s 选择器本身有一个 higher specificity比 input[type=text]。

因此，以下内容可能就足够了:

#s { border: 0; }