css单选框复选框美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css单选框复选框美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { font: 16px/150% microsoft yahei,pingfang sc,Tahoma,Sim sun; } input:disabled + label { /*禁用的指针*/ cursor: not-allowed } .Radio input, .Checkbox input { display: none } .Radio label, .Checkbox label { padding: 0 16px 0 0; display: inline-block; cursor: pointer; position: relative } .Radio label:before, .Checkbox label:before { box-sizing: border-box; content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #999; margin: 0 8px; vertical-align: middle; display: inline-block; transition: 0.1S; } .Radio label:hover:before, .Checkbox label:hover:before { border-color: #00a4ff; } .Radio input:disabled + label:before, .Checkbox input:disabled + label:before { background-color: #CCC; border-color: #999; opacity: 0.5; } .Radio input:disabled + label, .Checkbox input:disabled + label { opacity: 0.5; } .Radio input:checked + label:before { border: 5px solid #00a4ff; } .Checkbox label:before { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHRpdGxlPmljb190aWNrPC90aXRsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjgsNC4zYy0wLjQtMC40LTEtMC40LTEuNCwwTDUuNywxMEwzLjYsNy44Yy0wLjQtMC4zLTEtMC4zLTEuNCwwLjFjLTAuMywwLjQtMC4zLDEsMCwxLjNMNSwxMgoJYzAuNCwwLjQsMSwwLjQsMS40LDBsNi40LTYuNEMxMy4yLDUuMywxMy4yLDQuNywxMi44LDQuM0wxMi44LDQuM3oiIHN0eWxlPSJmaWxsOiNGRkY7ZmlsbC1ydWxlOmV2ZW5vZGQiLz4KPC9zdmc+Cg==') no-repeat center; background-size: 0; border-radius: 4px; transition: 0.2S; } .Checkbox input:checked + label:before { background-color: #00a4ff; background-size: 16px; border-color: #00a4ff; } .HoverLabel label { display: block; border-radius: 4px; padding: 4px; width: 100%; } .HoverLabel label:hover { background-color: #EEE; } </style> <title>极简美化单复选框</title> </head> <body> <h3>单选框类型</h3> <h4>基础样式</h4> <span class="Label"><span class="Mandatory"></span>请选择性别</span> <span class="Radio"> <input id="man" name="sex" type="radio" checked /><label for="man">男</label> <input id="female" name="sex" type="radio" /><label for="female">女</label> <input id="secret" name="sex" type="radio" disabled /><label for="secret">不可用</label> </span> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0