html - 在 CSS 中选择选中的元素

标签 html css drop-down-menu selector

<分区>

我在选择下拉列表中的元素时遇到问题。这是 fiddle :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 选择器?

谢谢大家!

最佳答案

没有伪选择器可以按照您想象的方式标记选择框。所以你原来的问题的答案是否定的:(

但是如果您不介意使用一点点 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

关于html - 在 CSS 中选择选中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20251028/

上一篇:javascript - 使用 slidetoggle() 隐藏特定高度的 div

下一篇:html - 在 HTML 中使用 CSS 来创建 PDF 的分页符

相关文章:

html - AngularJS:多列下拉列表

html - 内联列表项左右对齐

javascript - 使用 Javascript 获取下拉列表中选择的值(显示 null)

javascript - CSS:带有下拉菜单的粘性导航栏未显示(-溢出)?

javascript - 我如何从下拉菜单中的数据库中获取数据

CSS 左属性 : 50% OR 500px, 哪个更大?

html - 在背景上设置 youtube 视频

php - 有没有办法使用 php 或 htaccess 来阻止访问 url 的特定部分

CSS 下拉菜单未完全显示

html - 背景颜色是窗口 CSS 高度的 50%