2013-04-02 150 views
0

我做了什么:更改HTML表单CSS属性标签

我使用的形式,字体真棒和标签创建的HTML测验。我使用字体真棒的图标圈和图标圈空白类替代为单选按钮以获得更加自定义的外观。当你选择一个选项时,我会这样做,CSS会将字体真棒类的颜色更改为橙​​色。

我所试图做的事:

我试图做一个CSS属性,将标签的文本属性更改为相同的颜色选择字体真棒类。

CSS:

[type=radio] { 
    display: none; 
} 
[type=radio] + label:before { 
    content: "\f10c"; 
    color: #183e63; 
    margin-right: 10px; 
} 
[type=radio]:checked + label:before { 
    content: "\f111"; 
    color: #fcbc02; 
    margin-right: 10px; 
} 
h3 { 
    color: #5f93c5; 
} 
label { 
    color: #183e63; 
    font-weight: bold; 
} 

完整代码(http://jsfiddle.net/fTdRS/15/

谢谢!

编辑:对不起“简单的问题”,但我只是学习CSS,这是我第一次使用[类型]属性。

回答

5

地址:

[type=radio]:checked + label { 
    color: #fcbc02; 
} 

http://jsfiddle.net/fTdRS/17/

+2

注:':checked'是一个CSS3选择器。在更糟糕的情况下,在较旧的浏览器上,颜色保持不变,完全可以接受。 –

+0

我喜欢这个,不需要jQuery或JavaScript。 –