样式化单选按钮

Question

我在样式化单选按钮方面遇到了很大的问题，因此我已经成功地在Chrome中实现了完美的效果，在Firefox中略微有些，但在IE中完全没有。

这是期望的外观（在Chrome中）：

这是Firefox中的外观：

而在IE中......

我为你们准备了一个JSFiddle让你们玩耍，但我似乎无法弄清楚如何在跨浏览器方面使其工作。有什么想法吗？

JSFiddle：http://jsfiddle.net/s5rpd97b/

尽管代码已经在JSFiddle上了，但我还是要贴一下HTML代码：

   <input style="background: url(http://socialavatarnetworkscript.com/media/img/male_avatar.png);margin-right: 240px;" class="gender" name="gender" type="radio" value="male">
   <input style="background: url(http://socialavatarnetworkscript.com/media/img/female_avatar.png)" class="gender" name="gender" type="radio" value="female">

CSS：

input[type="radio"].gender::after{
    background: rgba(0, 0, 0, 0.01);
    position: absolute;
    width: 170px;
    height: 300px;
    display: block;
    content: '';
    color: white;
    font-size: 1px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
input[type="radio"].gender:checked::after{
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    width: 170px;
    height: 300px;
    display: block;
    content: 'SELECTED';
    border-radius: 4px;
    color: white;
    font-family: titillium, sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    line-height: 300px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
input[type="radio"]{
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance:    none;
    -ms-appearance:     none;
    appearance:         none;
    border-radius: 4px  !important;
    outline: none       !important;
    border: none        !important;
}
input[type="radio"].gender{
    height: 300px;
    width: 170px;
    border-radius: 4px !important;
    outline: none !important;
    border: none !important;
}

- Tom Wilson

---

可能相关：https://dev59.com/SGcs5IYBdhLWcg3wdzxm - Michael Liu

不要简单地使用像 input 这样的 表单元素 作为 :after 和 :before 的选择器。 - Roko C. Buljan

::after 应该被渲染为如果一个新的_child_元素被插入到应用它的元素中 - 但是 input 元素不能有子元素。而且，跨浏览器格式化单选按钮是棘手的。为了更可靠的结果，我建议您在每个输入框后面使用额外的元素，并使用相邻兄弟选择符 + 来根据输入的状态进行格式化。 - CBroe

我想使用标签来完成这个任务是最可行的选择？ - Tom Wilson

混合使用内联样式和外部样式是一种非常糟糕的做法...因为这会给其他人阅读你的代码带来麻烦... - T J

你获得了我今天的特别之星！* - Tom Wilson

Answer 1

正如评论中所述，:after和:before伪元素被插入到它们应用的元素内部。 :after和:before不能与输入一起使用，因为<input>元素不能有子元素:(

解决方法是将图像和:after伪元素应用于单选框输入标签。从语义角度来看，为标签赋值也很好。

• 单选框输入使用display: none隐藏，并通过与匹配的for和id属性附加的相应标签进行选择。

• input + label仅针对直接在每个输入后面的标签元素。

• input + label:after和input:checked + label:after提供所选不透明覆盖层和过渡动画

这里有一个例子!

HTML

<div id="welcome-gender"> 
    <input class="male" name="gender" type="radio" value="male" id="male-one">
    <label for="male-one">Male One</label>          

    <input class="female" name="gender" type="radio" value="female" id="female-one">
    <label for="female-one">Female One</label>
</div>

CSS

input[type="radio"]{
    display: none;
}
label {
    position: relative;
    width: 170px;
    height: 300px;
    display: inline-block;
    color: white;
    font-size: 0;
    border-radius: 4px;
}
.male + label {
    background: url(http://socialavatarnetworkscript.com/media/img/male_avatar.png);    
}
.female + label {
    background: url(http://socialavatarnetworkscript.com/media/img/female_avatar.png)
}

input + label:after {
    background: #FFF;
    content: '';    
}
input:checked + label:after {
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    width: 170px;
    height: 300px;
    display: block;
    content: 'SELECTED';
    border-radius: 4px;
    color: white;
    font-family: titillium, sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    line-height: 300px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

- misterManSam

---

你真的救了我的命，非常感激。 - Tom Wilson