【问题标题】:Changing HTML form CSS properties for labels更改标签的 HTML 表单 CSS 属性
【发布时间】:2013-04-02 13:28:51
【问题描述】:

我做了什么:

我使用表单、超棒的字体和标签创建了一个 HTML 测验。我正在使用来自 font awesome 的 icon-circle 和 icon-circle-blank 类来替代单选按钮,以获得更个性化的外观。我有所以当你选择一个选项时,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,这是我第一次使用 [type] 属性。

【问题讨论】:

    标签: html css forms label font-awesome


    【解决方案1】:

    添加:

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

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

    【讨论】:

    • 注意::checked 是一个 CSS3 选择器。在更糟糕的情况下,在旧版浏览器上,颜色保持不变,完全可以接受。
    • 我喜欢这个,不需要 jQuery 或 JavaScript。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-20
    • 2014-12-30
    • 2011-03-08
    • 1970-01-01
    相关资源
    最近更新 更多