自定义checkbox、radio样式

Task

自定义checkbox、radio样式

Note

一.伪元素与伪类

CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 将在用户悬停在选择器指定的元素上时应用样式。

而伪元素并不指定所选择元素的特殊状态,它指定的是所选择元素的某些部分,相当于是指定一个虚拟的DOM元素的样式,例如::first-line指定该元素的第一行的样式。

所有的伪元素

为了更好的区分伪元素和伪类,CSS3中伪元素使用两个冒号(::)表示,伪类使用一个冒号(:)。

二.雪碧图

CSS雪碧图的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS backgroundbackground-position属性渲染。

三.需求实现

伪元素实现

  1. 实现原理:隐藏原生input标签,给与其关联的label添加样式,实现自定义控件。
  2. 代码:
 <div class="demo1">
      <input id="radio1" type="radio">
      <label class="radio_label demo1_radio" for="radio1"></label>
      <input id="checkbox1" type="checkbox">
      <label class="checkbox_label demo1_checkbox" for="checkbox1"></label>
 </div>
input {
  display: none;
}

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 13px;
}

.demo1 > label::before {
  display: inline-block;
  content:"";
  width:20px;
  height:20px;
  position: absolute;
  border: 2px solid darkgray;
}

.radio_label::before {
  border-radius: 50%;
}

input[type="radio"]:checked + .demo1_radio::before {
  content: "\25CF";
  color:red;
  text-align: center;
  border-color: red;
  line-height: 20px;
}

input[type="checkbox"]:checked + .demo1_checkbox::before {
  content: "\2714";
  color: red;
  text-align: center;
  border-color: red;
  line-height: 20px;
}
  1. 坑:
    • content属性用于在::before::after伪元素中插入内容,其内容都是匿名的可替换元素。在这里为了实现控件的选中效果,使用的是16进制 unicode 编码(计算机中每个字符都对应一个 unicode 编码)。
    • 在指定控件在被选中时的状态样式时,需要根据input:checkedlabel的相邻关系来对其应用样式,这时需要用到相邻同胞选择器+(用于定位同一个父元素之下某个元素之后的元素)。

雪碧图实现

  1. 实现原理:隐藏input,给label加背景图片。使用backgroundbackground-position属性分别渲染出所需要的图片。(所以你点的可能是个假控件)。

  2. 代码:

    <div class="demo2">
          <input id="radio2" type="radio">
          <label class="radio_label demo2_radio" for="radio2"></label>
          <input id="checkbox2" type="checkbox">
          <label class="checkbox_label demo2_checkbox" for="checkbox2"></label>
    </div>
    
    .demo2 > label {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(http://p1.bqimg.com/567571/99322cf8c3283e42.png) no-repeat;
    }
    
    input[type="radio"] + .demo2_radio {
      background-position: -23px -10px;
    }
    
    input[type="checkbox"] + .demo2_checkbox {
      background-position: -25px -32px;
    }
    
    input[type="radio"]:checked + .demo2_radio {
      background-position: -58px -10px;
    }
    
    input[type="checkbox"]:checked + .demo2_checkbox {
      background-position: -60px -32px;
    }
    
  3. 坑:找出精确的background-position需要借助 Photoshop……

优劣比较

  • 使用伪元素不产生http请求,性能较高。代码量较多。
  • 使用雪碧图代码量较少。background-position的值需要十分精确,不然点击时会产生bug。但是,用雪碧图能更方便地实现自定义的元素样式。
Show Comments