首页 > 代码库 > Input Radio和Checkbox标签的高富帅用法
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;}
结语
当然这个只是最简单的效果，还可以添加各种鼠标划过、鼠标点击、动画等效果。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。