所以我在设置单选按钮的样式方面遇到了很大的麻烦,因此我设法让它在 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;
}
最佳答案
如评论中所述,:after
和 :before
伪元素被插入到应用它们的元素内部。 :after
和 :before
不应将输入作为 <input>
使用元素不能有 child :(
解决方案是应用图像和 :after
radio 输入标签的伪元素。从语义的 Angular 来看,给标签赋值也很好。
radio 输入用
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;
}
关于html - 造型 radio 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25345886/