选择CSS中的选中元素

我有一个关于在下拉列表中选择元素的问题。这里是小提琴：http://jsfiddle.net/H656H/选择CSS中的选中元素

<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选择器？

谢谢大家！

来源

2013-11-27 Blaz Kranjcev

你想要什么样的风格？ –

'＃razred'下拉菜单中的元素。其实全部用'

没有伪选择器以您想象的方式标记选择框。所以你原来的问题的答案是：（

但是，如果你不介意使用一小部分的JavaScript，那么你可以模拟你想要的功能，你可以添加一个类到选择框的onchange方法。。从一个脚本标签中的页面的底部做我米内联做仅作为演示：

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

然后你可以只定义自定义类，你要

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

方式

JS小提琴：http://jsfiddle.net/9K5h2/1

来源

2013-11-27 19:42:31 walmik

编辑：删除不正确的答案部分。

关于CSS回答您的实际问题：

From a previous question

#razred option:checked { color: red; }

来源

2013-11-27 19:13:12 echochamber

OP的标记没有问题。如果未提供任何值，则选项标签内的内容将与表单提交一起发送。 – cimmanon

@cimmanon哦，不知道。谢谢。编辑为只显示答案的正确部分:)。 – echochamber

重点选择会做一些事情，是接近你正在寻找

#razred:focus{ 
    color: blue; 
}

更新fiddle什么

来源

2013-11-27 19:38:52

问题解决了。它现在有用，谢谢！ –

选择CSS中的选中元素

回答

相关问题