唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > 自定义选择框样式

自定义选择框样式

2017-01-04 分类:HTML/CSS 作者:管理员 阅读(1789)

默认的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>

在线一览

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
3

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 自定义选择框样式

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 219 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 827 条
  • 链接总数: 13 个
  • 标签总数: 405 个
  • 建站时间: 943 天
  • 注册用户: 1257 人
  • 访问总量: 8871779 次
  • 最近更新: 2019年7月15日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线