在CSS中选择选中的元素[重复]答案

【问题标题】：Selecting checked element in CSS [duplicate]在CSS中选择选中的元素[重复]
【发布时间】：2013-12-13 14:24:11
【问题描述】：

我在选择下拉列表中的元素时遇到问题。这是小提琴：http://jsfiddle.net/H656H/

<select id="razred" name="razred">
            <option hidden selected><?php echo $razred; ?></option>
            <option>1.A</option>
            <option>1.B</option>
            <option>1.C</option>
            <option>1.Č</option>
            <option>1.D</option>
            <option>1.E</option>
            <option>2.A</option>
            <option>2.B</option>
            <option>2.C</option>
            <option>2.Č</option>
            <option>2.D</option>
            <option>2.E</option>
            <option>3.A</option>
            <option>3.B</option>
            <option>3.C</option>
            <option>3.Č</option>
            <option>3.D</option>
            <option>3.E</option>
            <option>4.A</option>
            <option>4.B</option>
            <option>4.C</option>
            <option>4.Č</option>
            <option>4.D</option>
            <option>4.E</option>
        </select><br />

所以，我想在用户单击元素后为其设置样式。因此，只有当用户选择一个时，他的选择才会收到样式。我认为下拉列表中的这个选定元素必须有某种 CSS 伪选择器。是否有任何 CSS 选择器？

谢谢大家！

【问题讨论】：

你想设计什么元素？
#razred 下拉列表中的元素。实际上都带有<option>标签。

标签： html css drop-down-menu selector

【解决方案1】：

没有像您想象的那样标记选择框的伪选择器。所以你原来的问题的答案是否定的:(

但是，如果您不介意使用一点点 JavaScript，那么您可以模拟您想要的功能。您可以向选择框的 onchange 方法添加一个类。理想情况下，这应该从页面底部的脚本标记内完成。我正在内联仅作为演示：

<select id="razred" name="razred" onchange='this.className="visited"'>

然后你可以按照你想要的方式定义自定义类

.visited {
    color: #f00;
    -webkit-appearance: none;  /*required for webkit based browsers*/
}

JSFiddle：http://jsfiddle.net/9K5h2/1

【讨论】：

【解决方案2】：

焦点选择器会做一些接近你正在寻找的事情

#razred:focus{
    color: blue;
}

更新fiddle

【讨论】：

问题已解决。现在可以了，谢谢！

【解决方案3】：

编辑：删除了答案的错误部分。

您关于 css 的实际问题的答案：

From a previous question

#razred option:checked { color: red; }

【讨论】：

OP 的标记没有问题。如果未提供任何值，则选项标签内的内容随表单提交一起发送。
@cimmanon 哦，不知道。谢谢。编辑为只显示答案的正确部分:)。