无法在 WordPress 的表单中看到 select 字段上的下拉箭头

Question

我遇到了 CSS 样式的问题，我已经苦苦挣扎了两天，无法解决。

请查看我网站的此注册页面。 在底部，您会看到一个安全问题（实际上在下拉列表中）：

该片段的 HTML 在这里：

<select name="seq_ques[]" class="input" style="font-size:14px; height:35px;">
    <option value="16">What is the scripture citation on title page of the song book?</option> 
</select>

如您所见，下拉箭头不可见。 我可以在浏览器中执行此操作，并且可以看到箭头：

因此，我尝试通过我的 Wordpress 网站的自定义代码部分添加该样式：

select[name="seq_ques[]"] {
    background: none;
}

我不知道如何关闭该设置。 如果我输入一个颜色值，那么整个 select 框都会填充颜色。 所以我很困惑。

Answer 1

为了实现你想要的，你可以：

A - 更正/删除导致问题的 css

这就是 wp-content/plugins/hoot-customcode/style.css 的第 50 行

select[name="seq_ques[]"], input[name="seq_ans[]"] {
    width: 100%;
    background: #f9f9f9;
}

应该

select[name="seq_ques[]"], input[name="seq_ans[]"] {
    width: 100%;
    background-color: #f9f9f9;
}

B - 覆盖导致问题的 css

如果您无法修改导致问题的 css 文件，则可以覆盖违规规则。

html select[name="seq_ques[]"], html input[name="seq_ans[]"] {
    width: 100%;
    background-color: #f9f9f9;
}

上面的这个选择器比导致问题的选择器具有更高的优先级，并且会在背景中有#f9f9f9颜色的同时留下箭头。 如果您不想要那种颜色，您也可以更改为您想要的任何颜色，例如#ffffff表示白色。