Input Radio和Checkbox标签的高富帅用法

input标签中radio和checkbox这标签的原生效果让人无力吐槽，实在太丑。

好在现在weibkit浏览器可以用

-webkit-appearance:none;

来改变自己的矮矬穷形象。

radio标签

使用场景1：很多图片下方的点点点，这样做的好处是用JS设置一个点为选中只要将这个元素的checked设置为true即可，而且用鼠标点击也不需要另外写JS脚本。

简单版的CSS代码如下：

.radio{
    width: 10px;
    height: 10px;
    -webkit-appearance: none;
    pointer-events: none;
    border-radius: 5px;
    display: inline-block;
    background-color: rgb(205,205,205);
    margin: 0 5px;
}
.radio:checked{
    background-color: rgb(134,176,213);
}

checkbox标签

使用场景1：开关按钮，开关按钮可以用一张图片，然后设置其background-position-x属性左右移动。

简单版的CSS代码如下：

.checkbox{
    -webkit-appearance:none;
    width: 100px;height: 30px;
    background-color: #fff;
    background-image: url('img/checkbox.png');
    background-repeat: no-repeat;
}
.checkbox:checked{
    background-position-x: 100px;
}

 结语

当然这个只是最简单的效果，还可以添加各种鼠标划过、鼠标点击、动画等效果。

转载于:https://www.cnblogs.com/flywind2009/p/3806728.html