2017IFE-自定义checkbox， radio样式

2017-06-01 本文已影响86人朋友喜欢叫我春哥

前言

2017-百度前端技术学院编码任务：自定义checkbox， radio样式

任务目的

深入了解html label标签
了解CSS边框、背景、伪元素、伪类（注意和伪元素区分）等属性的设置
了解CSS中常见的雪碧图，并能自己制作使用雪碧图

任务描述

参考样例点击查看，实现页面开发，要求实现效果基本一致

注意：
尝试背景图和伪元素两种不同方式实现，对比两种方式各自的优缺点。
注意测试不同情况，尤其是极端情况下的效果。

DEMO

项目地址

实现

整体解决思路：隐藏表单默认样式，伪类或背景图片来自定义样式，通过伪类:checked来改变选择状态并且切换样式。

label

<label>它通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。

产生关联可以和控件产生联系，例如：点击标签label元素可以改变<input type="radio">的 :checked 状态，或者获得<input type="text" id="User" name="Name" />的焦点状态。

之前思考过隐藏input后，为什么要用label元素来伪装表单呢？原因是其他元素无法和input产生关联，点击其他元素是无法改变表单的checked 状态，而点击label是可以的。

示例


/*放在标签元素内产生关联*/
<label>Click me <input type="text" id="User" name="Name" /></label>

/*通过设置for属性产生关联*/
<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

伪类和伪元素的区别

其实关于这部分自己之前做过一次总结。结论就是，伪类和伪元素都是给元素添加效果，不同的是伪类是相当于添加一个类class，伪元素相当于添加一个元素element。

另外:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值，可以改变该元素的 :checked 状态，并:checked属性赋给一个新的对象(例如其他的option值)。

input[type="radio"]:checked
表示页面上的所有选中的radio按钮
input[type="checkbox"]:checked
表示页面上的所有选中的checkbox按钮
option:checked
表示页面上的所有选中的select的选项

CSS 属性 - 伪类和伪元素的区别

伪类和背景图片实现

伪类

点击label或者input改变input的checked状态，同时改变样式和添加伪元素来达到模拟表单效果。


.input-disguise__radio > input:checked + label::after,
.input-disguise2__radio > input:checked::after{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            content: '';
            text-align: center;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d81e06;
}

.input-disguise__checkbox > input:checked + label::after,
.input-disguise2__checkbox > input:checked::after{
            position: absolute;
            top:-2px;
            left: 1px;
            content: '\2714';
            text-align: center;
            color: #d81e06;
            font-size: 12px;
}

背景图片（雪碧图）

之前设置label元素模拟表单样式，这次通过背景图片来达到效果。
然后通过background-position来定位背景图片位置.雪碧图的使用就是为了减少图片请求。


.input-sprite__radio > label,.input-sprite__checkbox > label{
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;

    background: url(img/input-sprite.png) 12px 0 no-repeat;
    background-size: 200% 100%;

}

.input-sprite__radio > input[type=radio]:checked + label{
    background-position: 0 0;
    width: 14px;
    height: 14px;
    border: none;
}

.input-sprite__checkbox > input[type=checkbox]:checked + label{
    background-position: 100% 0;
    width: 14px;
    height: 14px;
    border: none;
}

关于伪元素和雪碧图的优缺点：

雪碧图优点是减少代码量，简单有效；缺点是无法精准定位，没有伪元素准确，修改麻烦。

伪元素优点是图片请求减少，定位准确，方便修改；缺点代码量多，实现较复杂的效果比较麻烦。

参考链接