CSS 美化复选框-html教程-PHP中文网

CSS 美化复选框

php中文网

发布： 2016-09-27 14:05:20

原创

1779人浏览过

今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧，如下是3种不同状态下的效果：

美间AI

美间AI：让设计更简单

查看详情

一. Html结构

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="check-wrap"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="icheck"</span> <span style="color: #0000ff;">/></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ilabel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登录后复制

注： label 标签的 for 属性值必须指定为 input 的 id 名称。

立即学习“前端免费学习笔记（深入）”；

二. CSS 代码

<span style="color: #800000;">.check-wrap</span>{<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 24px</span>;
}<span style="color: #800000;">
.icheck</span>{<span style="color: #ff0000;">
     opacity</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.ilabel</span>{<span style="color: #ff0000;">        
     border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">    
     cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
     display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
     position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
     top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
     left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
.ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
     border</span>:<span style="color: #0000ff;"> 2px solid #DDD</span>;<span style="color: #ff0000;">        
     display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
     font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
     text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
     border-radius</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
     width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
     height</span>:<span style="color: #0000ff;"> 20px</span>;
 }<span style="color: #800000;">
 .icheck:checked + .ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> "✓"</span>;<span style="color: #ff0000;">
     border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     background-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> #fff</span>;
  }<span style="color: #800000;">
  .icheck:indeterminate + .ilabel:after</span>{<span style="color: #ff0000;">
     content</span>:<span style="color: #0000ff;"> "■"</span>;<span style="color: #ff0000;">
     color</span>:<span style="color: #0000ff;"> #3f51b5</span>;<span style="color: #ff0000;">
     background-color</span>:<span style="color: #0000ff;"> #FFF</span>;<span style="color: #ff0000;">
     border-color</span>:<span style="color: #0000ff;"> #3f51b5</span>;
  }

登录后复制

1. 将原有的 input 标签透明度设为0

2. label:after 的宽高设置 20px 是因为 border 占据了4px

3. checkbox 的 indeterminate 状态大家用的可能比较少（效果图中的第2个状态），只能通过 js 进行设置，这种情况通常用在树型结构（即：子节点有选中但并未全部选中的时候父节点的状态）

<script>
     <span style="color: #0000ff;">var</span> icheck = document.getElementById("icheck"<span style="color: #000000;">);
     icheck.indeterminate </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
</span></script>

登录后复制

代码量真的挺少的，不明白的话请留言，谢谢.... :)