[原创]打造漂亮的单选框和复选框

来源：UI世界 - yinq 时间：2016-11-24 10:17:19 浏览：5992 次

本站文章，除标明（转）的文章外，其他的都是本站原创，转载请标明出处，谢谢。

表单里面单选框和复选框可以说是一点也不好看，随着css3的越来越流行，往上也有了很多漂亮的写法，这里是从网上的方法中整理出来的，直接拿来用就可以了，可能在实际运用当中，需要做一些微调。下面直接放代码吧&lt;!doctype&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;utf-8&quot;&gt; &lt;title&gt;漂亮的单选框和复选框样式&nbsp;-&nbsp;UI世界&lt;/title&gt; &lt;style&gt; body&nbsp;{&nbsp;padding:&nbsp;50px;&nbsp;font-family:&nbsp;&quot;微软雅黑&quot;;&nbsp;font-size:&nbsp;14px;} a:hover&nbsp;{&nbsp;text-decoration:&nbsp;none;} .ui-checkbox { &nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; } .ui-checkbox&nbsp;input[type=checkbox]&nbsp;{&nbsp;display:&nbsp;none;} .ui-checkbox&nbsp;span{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer; } .ui-checkbox&nbsp;input[type=checkbox]+span:before { &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;&quot;&quot;; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;18px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;18px; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle; &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;-3px; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;2px; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#e3e3e3; } .ui-checkbox&nbsp;input[type=checkbox]:checked+span:before { &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#3aab4e; } .ui-checkbox&nbsp;input[type=checkbox]:checked+span:after { &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;12px; &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;&#39;✔&#39;; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;10px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;10px; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;1px; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;4px; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#FFF; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; } .ui-checkbox&nbsp;input[type=checkbox]:disabled:checked+span:before { &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;.65; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#e3e3e3; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#e3e3e3; } .ui-radio&nbsp;{&nbsp;display:&nbsp;inline-block;&nbsp;vertical-align:&nbsp;middle;} .ui-radio&nbsp;input[type=radio]&nbsp;{&nbsp;display:&nbsp;none;} .ui-radio&nbsp;label[for]&nbsp;{&nbsp;cursor:&nbsp;pointer;&nbsp;margin-top:&nbsp;-3px;} .ui-radio&nbsp;input[type=radio]:checked+.radio-label&nbsp;.radio:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;&quot;&nbsp;&quot;; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;6px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;6px; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#fff; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%; } .ui-radio&nbsp;.radio-label&nbsp;.radio&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;#e3e3e3; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle; } .ui-radio&nbsp;input[type=radio]:checked+.radio-label&nbsp;.radio&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#3aab4e; &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#3aab4e; } .form-item, .dream-label&nbsp;{&nbsp;margin-bottom:&nbsp;10px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&nbsp;action=&quot;#&quot;&nbsp;method=&quot;post&quot;&nbsp;target=&quot;_top&quot;&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;dream-label&quot;&gt;您最喜欢的球类运动：&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;dream-controls&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;ui-checkbox&quot;&gt;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;ids[]&quot;&nbsp;value=&quot;1&quot;&gt;&lt;span&gt;&nbsp;篮球&lt;/span&gt;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;ui-checkbox&quot;&gt;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;ids[]&quot;&nbsp;value=&quot;2&quot;&gt;&lt;span&gt;&nbsp;足球&lt;/span&gt;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;ui-checkbox&quot;&gt;&lt;input&nbsp;type=&quot;checkbox&quot;&nbsp;name=&quot;ids[]&quot;&nbsp;value=&quot;3&quot;&gt;&lt;span&gt;&nbsp;排球&lt;/span&gt;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;div&nbsp;class=&quot;form-item&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;dream-label&quot;&gt;你要生成的sql语句：&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;dream-controls&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-radio&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;type&quot;&nbsp;id=&quot;isInsert&quot;&nbsp;value=&quot;1&quot;&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;radio-label&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;radio&quot;&nbsp;for=&quot;isInsert&quot;&gt;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=&quot;isInsert&quot;&gt;插入语句&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=&quot;radio&quot;&nbsp;name=&quot;type&quot;&nbsp;id=&quot;isUpdate&quot;&nbsp;value=&quot;0&quot;&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class=&quot;radio-label&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;class=&quot;radio&quot;&nbsp;for=&quot;isUpdate&quot;&gt;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=&quot;isUpdate&quot;&gt;更新语句&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;效果如图：转摘文章请标明来源：http://www.uishijie.com/article/24.html

上一篇：[原创]Composer安装thinkphp5全过程

下一篇：Jquery实现漂亮的弹出式搜索框

踩 0

[原创]打造漂亮的单选框和复选框

友情链接