通常有时我需要完全自定义输入元素：复选框,单选按钮,选择等.
只是想问一下这种做法是否可以接受：
>我们为输入创建了一些包装器(在这种情况下为单选框)
>我们隐藏我们真正的收音机盒(不透明度：0,可见性：隐藏,左：-9999px等)
>单击父包装器时：我们获取输入名称属性,使用[type =“radio] [name =”clickedInputName“]查找所有输入,将它们全部设置为未选中,并设置我们单击以将其设置为选中的输入.
附上一些不太漂亮的jsfiddle：https://jsfiddle.net/moLvh9dd/
$('.radio-wrapper').on('click', function(e){
e.preventDefault();
var targetInput = $(this).find($('input'));
var clickedInputName = 'input[type="radio"] [name="'+targetInput.attr('name')+'"]';
$(clickedInputName).each(function(){
$(this).prop('checked', false);
$(this).parent().removeClass('input-checked');
})
targetInput.prop('checked', true);
$(this).addClass('input-checked');
});
检查浏览器兼容性, – 到处都是IE8,所以尽管它只是工作,我想知道它是否是正确的方法？可以接受吗？`
尽管它依赖于javascript / jQuery.
编辑：
感谢收音机和复选框输入的一些很好的答案,但是自定义选择元素呢？每种选择都有多种选择？
比如像这里 – 一些丑陋的jQuery：https://jsfiddle.net/4gt7gavq/
最佳答案 您可以在不使用纯CSS或使用图像的JS的情况下使用替代方法.
在这里你可以找到解释的两种技术,我当然会建议纯CSS的方式,但这取决于你的跨浏览器要求.
纯CSS造型
下面的演示纯粹使用CSS.与基于图像的方法不同,纯CSS方法随文本大小而缩放.
用于每个复选框或单选按钮的HTML与基于图像的方法中的HTML类似：
<div>
<input id="option" type="checkbox" name="field" value="option">
<label for="option"><span><span></span></span>Value</label>
</div>
标签内的span元素用于创建替代图形.虽然单选按钮需要两个跨度,但复选框只需要一个.
我们隐藏样式表中的复选框和单选按钮：
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
该技术与基于图像的方法相同,但由于宽度是相对于第3行中的字体大小设置的,我们必须恢复第6行中的字体大小,因为浏览器使用较小的字体大小来复选框和单选按钮默认.
然后我们定位标签：
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
同样,该技术与基于图像的方法相同,但使用相对单位.填充不是必需的,因为可伸缩图形与背景图像不同,将推动标签文本.
然后,我们设置第一个范围的样式以创建未选中的图形：
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
这里使用的技术在CSS3样式按钮的页面中有详细描述.第15行确保图形位于标签的底部而不是文本的基线.
在该示例中,背景渐变在所选复选框和单选按钮上反转：
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
然后我们在所选复选框中显示一个勾号：
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
第1行中的选择器使用：before伪类,以便第2行可以在span元素内插入tick符号.第3,4,6,7和8行在元素中居中显示刻度线,而第5,9和10行则为文本设置样式.
最后,我们在选定的单选按钮内显示“子弹”,将与未选中图形相同的技术应用于第二个span元素：
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/#pureCSS
选择元素
在select元素上,您可以更改颜色,边框和下拉箭头.不多了.
为此,使用自定义箭头创建一个png并将其设置为元素包围：
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
