Ziv小威

CSS3实现自定义checkbox

Ziv小威 发表于2016-04-17 CSS3
经常用到checkbox的朋友肯定知道,浏览器默认的checkbox样式在大多数情况下并不能满足我们UI视觉上的需求,在为了视觉上保持高度一致的情况下,我们通常不得不去对checkbox的样式进行自定义。通过直接更改checkbox控件的样式,我们发现会有很多问题,所以我们会用些其他的方法来模拟checkbox控件。

焦点型(focus)

具体思路是先隐藏checkbox控件,然后通过label元素和一个父级div元素模拟一个类似radio的样式,然后通过labelfor属性触发:check伪类的事件,来改变label的背景样式。具体代码如下:

html

<div class="focus-checkbox">
    <input type="checkbox" name="focusCheck" value="" id="FocusCheck" />
    <label for="FocusCheck"></label>
</div>

css

.focus-checkbox {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50% 50%;
        background: #eee;
}
    
.focus-checkbox input[type=checkbox] {
    visibility: hidden;
}
    
.focus-checkbox label {
    position: absolute;
    height: 30px;
    width: 30px;
    left: 5px;
    top: 5px;
    background: #ddd;
    border-radius: 50% 50%;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}
    
.focus-checkbox input[type=checkbox]:checked + label {
    background: #26ca28;
}

滑动型(slide)

跟focus的html结构一样,但是这次改变的是label的位置,样式则是类似移动端的滑动按钮。直接看代码:

html

<div class="slide-checkbox">
    <input type="checkbox" name="slideCheck" value="" id="SlideCheck" />
    <label for="SlideCheck"></label>
</div>

css

.slide-checkbox {
    position: relative;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    background: #4fbe79;
}
    
.slide-checkbox input[type=checkbox] {
    visibility: hidden;
}
    
.slide-checkbox label {
    position: absolute;
    height: 30px;
    width: 30px;
    left: 5px;
    top: 5px;
    background: #FFFFFF;
    border-radius: 50% 50%;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}
    
.slide-checkbox input[type=checkbox]:checked + label {
    left: 85px;
}

以上两则示例中都利用了transition这个css3过度属性来达到的动画效果。我们可以直接看看实际运行效果:

See the Pen JXvOVz by Ziv (@wewoor) on CodePen.

上面只是简单的2种形式,通过类似以上的方式,我们可以模拟其他更多形式的checkbox~

原文地址 http://imziv.com/blog/article/read.htm?id=71

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Ziv小威 · CSS3

让美的事情发生

 
comments powered by Disqus