javascript - 对输入使用自定义包装器 : pros and cons?

Question

有时我需要完全自定义输入元素:复选框、单选按钮、选择等。

只是想问问这样的做法是否可以接受:

1. 我们为输入创建某种包装器(在本例中为单选框)
2. 我们隐藏真正的单选框(不透明度:0，可见性:隐藏，左:-9999px，等等)
3. 单击父包装器:我们获取输入名称属性，找到所有具有 [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/

Answer 1

您可以采用替代方案，而不使用 JS 和纯 CSS 或使用图像。在这里你可以找到这两种技术的解释，我当然会建议纯 CSS 方式，但这取决于你的跨浏览器要求。

纯 CSS 样式

下面的演示完全使用 CSS 设置样式。与基于图像的方法不同，纯 CSS 方法随文本大小缩放。用于每个复选框或单选按钮的 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;
}

同样，该技术与基于图像的方法相同，但使用相对单位。不需要填充，因为可缩放图形与背景图像不同，它将插入标签文本。

然后我们设置第一个 span 的样式来创建未检查的图形:

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 元素内插入一个刻度符号。第 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

选择元素

在选择元素上，您可以更改颜色、边框和下拉箭头。不多了。

为此创建一个带有自定义箭头的 png 并将其设置为元素背景:

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

http://bavotasan.com/2011/style-select-box-using-only-css/