javascript – 使用自定义包装器输入:优点和缺点?

通常有时我需要完全自定义输入元素:复选框,单选按钮,选择等.

只是想问一下这种做法是否可以接受:

>我们为输入创建了一些包装器(在这种情况下为单选框)
>我们隐藏我们真正的收音机盒(不透明度: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;
   }

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

点赞