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; }

Answer 2

如果您在其他输入不在的某个上下文中有搜索输入字段，则可以将其作为目标。

示例：如果它位于<header>内，您可以执行此操作：

header #searchform #s {
    border: none;
}

但是mabye告诉我们你的输入字段周围的html和div：）

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

2 个答案: