唯品秀前端博客

默认的checkbox/radio都十分见不得人,那么是否有办法通过简单的css去定义自己需要的样式呢?答案当然是肯定的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择框样式</title>
<style>
label {font-size:12px;cursor:pointer;}
label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}
input[type="checkbox"],input[type="radio"] {display:none;}
input[type="radio"] + i {border-radius:7px;}
input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}
input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}
input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
</style>
</head>
<body>

    <label><input type="checkbox"><i></i>复选框</label><br>
    <label><input type="checkbox" checked><i></i>复选框</label><br>
    <label><input type="checkbox" disabled><i></i>复选框禁用</label><br>
    <label><input type="checkbox" disabled checked><i></i>复选框禁用已选</label><br>
    <label><input type="radio" name="abc"><i></i>单选框</label><br>
    <label><input type="radio" name="abc" checked><i></i>单选框</label><br>
    <label><input type="radio" name="abc" disabled><i></i>单选框禁用</label><br>
    <label><input type="radio" name="def" disabled checked><i></i>单选框禁用已选</label><br>
</body>
</html>

在线一览

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(4) 打赏
标签:

上一篇:

下一篇:

相关推荐

2 条评论关于"前端checkbox、radio样式美化自定义选择框样式"

表情

最新评论

  1. 四十五度的想念
    Windows 10 Firefox 56.0

    我看不错噢,谢谢老师

    1. 管理员
      Windows 10 Chrome 86.0.4240.198

      @四十五度的想念谬赞了,老师二字不敢当呢,对你有帮助就好

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏