html - 造型 radio 输入

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;
}

Answer 1

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

解决方案是应用图像和 :after radio 输入标签的伪元素。从语义的 Angular 来看，给标签赋值也很好。

• radio 输入用display: none隐藏并通过附有匹配 for 的相应标签选择它们和 id属性。

• input + label仅在每次输入后直接定位标签元素。

• input + label:after和 input:checked + label:after提供选定的不透明叠加和过渡动画

Have an example!

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;
}