为无线电输入设计样式 [英] Styling Radio Inputs

问题描述

所以我有设计单选按钮的主要麻烦，因此我已经设法使它在Chrome中完美工作，一点点在Firefox，而不是在所有在IE。

So I'm having major trouble with styling radio buttons and as such I've managed to get it working perfectly in Chrome, a tiny bit in Firefox and not at all in IE.

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

This is the expected look (in Chrome):

这是它在Firefox中的样子：

This is how it looks in Firefox:

和IE ...

我有一个JSFiddle让你们玩，但我只是不能找出如何得到这个工作的跨浏览器。任何想法？

I've got a JSFiddle for you guys to play around with, but I just can't seem to figure out how to get this working cross-browser. Any ideas?

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

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

强制粘贴代码，尽管它在JSFiddle上仍然存在：

Obligatory paste of code despite the fact it's on JSFiddle anyway:

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

推荐答案

在应用它们的元素内插入：之后和：before 之前的伪元素。 ：和：之前不能使用输入，因为< input> / code>元素不能有子元素：

As noted in the comments, the :after and :before pseudo elements are inserted inside of the element that they are applied on. :after and :before shouldn't work with inputs as the <input> element cannot have children :(

解决方案是应用图像和：

The solution is to apply the images and :after pseudo element to the radio inputs label. From a semantics point of view it's also nice to give the label a value.

• 从语义学的角度来看，无线电输入被 display：none 隐藏，并且通过它们的相应标签附加用于和 id 属性。

• The radio inputs are hidden with display: none and they are selected via their corresponding label attached with the matching for and id attributes.

input + label

输入+标签：和 input：checked + label：after 提供所选的不透明叠加层和过渡动画

input + label:after and input:checked + label:after provide the selected opaque overlay and transition animation

有个例子！

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

这篇关于为无线电输入设计样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！