表单自定义样式

Posted 2020-10-27 决起而飞

总结自定义表单样式的控件，涉及到一些css伪类伪元素知识

css组合选择符

css组合选择符在自定义表单控件中扮演着连接的作用，便于控制元素样式，css3中有四种组合选择符。

后代选择器 ：以空格分离，选择后代相匹配的元素；#div p 选择的是#div下所有的p元素

子元素选择器 ：以大于号分离，选择子元素相匹配的元素；#div>p 选择的是#div下直接子元素为p元素

相邻兄弟选择器 ：以加号分离，选择紧接的元素，二者有相同父级，#div+p选择的是#div相邻的p，只是第一个，因为第一个相邻的

后续兄弟选择器 ：以波浪线分离，选择所有相邻兄弟元素，都有相同的父级，#div~p 选择的是#div相邻的所有的p元素

伪类和伪元素

伪类 通过选择器找到不存在DOM树中的信息以及一些css选择器获得不到的信息，一般用冒号开头

常见的伪类

  anchors伪类                                           
  a:link      //未访问的链接                               
  a:visited   //已访问的链接
  a:hover     //鼠标滑过的链接
  a:active    //已选中的链接
  ?
  css-伪类
  :first-child  //元素的第一个子元素
  :last-child   //元素的最后一个子元素
  :nth-child(n) //元素的第n个子元素
  :first-letter //常用作文本，选择元素的第一个字母
  :first-line   //常用作文本，选择元素的第一行
  :checked      //选中的表单元素，比如radio Checkbox option
  :disabled     //禁用的表单元素
  :focused      //元素输入后具有焦点的元素

伪元素 在DOM树中创建一些抽象的元素，不存在与文档语言中，css为区分伪类和伪元素，伪元素为::

常见的伪元素有

  ::before 作为元素的第一个子节点插入DOM中
  ::after 作为元素的左右一个子节点插入DOM中  //常常与content相匹配生成内容，这里content有点意思，后面详细说

label标签

此标签表示用户界面中项目的标题，是内联元素inline，通常关联表单控件，或者放入其中

  //直接嵌套型
  <label>click <input type=‘text‘ id=‘user‘ name=‘username‘></label>
  //for绑定id型
  <label for=‘user‘>click</label>   
  <input type=‘text‘ id=‘user‘ name=‘username‘>

除了绑定这些控件，还搭配选择组

optgroup

<optgroup label=‘fruit‘>

自定义控件样式的实现

主要原理：

• 隐藏原生的input控件

• 使用label，对label添加样式，使其代替原来的控件

因为，label可以关联到所指定的控件，因而既可以为label添加样式，显示出控件样子；又可以使checkbox有原来的动态(即单选、多选)

雪碧图和图标字体

雪碧图

css图像合成技术，主要用来弄小图标的，雪碧图直接合成在一张图片上；作用：减少过多的文件请求，减少http请求。

图标字体

font-awesome

代码部分

方法一: 利用checked和:after

html结构

  <div id="first">
        Checkbox控件<br>
        <input type="checkbox" name="box" id="box1">
        <label for="box1"></label>
        <input type="checkbox" name="box" id="box2">
        <label for="box2"></label>
        <input type="checkbox" name="box" id="box3">
        <label for="box3"></label><br>
        radio控件<br>
        <input type="radio" name="radios" id="radio1">
        <label for="radio1"></label>
        <input type="radio" name="radios" id="radio2">
        <label for="radio2"></label>
  </div>

CSS样式

     //隐藏原来的input控件
     #first input{     
        display:none;
     }
     /*checkbox  设置label*/
     #first input[type=‘checkbox‘]+label{    
        width:16px;
        height:16px;
        display:inline-block;
        border:1px solid #d9d9d9;
     }
     /*:checked后*/
     #first input[type=‘checkbox‘]:checked+label:after{
        content:‘\2714‘;                   /*这里的content内容有点意思，另一篇文章中再总结*/
        color:red;
        width:8px;
        height:8px;
        line-height:8px;
        text-align:center;
        font-size:20px;
     }
     /*radio   设置label*/
     #first input[type=‘radio‘]+label{     
        width:16px;                       
        height:16px;
        display:flex;                     /*这里必须用flex布局,radio的label中的点才会出现*/
        border:1px solid #d9d9d9;
        border-radius:50%;
     }
     /*:checked后*/
     #first input[type=‘radio‘]:checked+label::after{
        border-radius: 50%;
              width: 8px;
              height: 8px;
              line-height: 8px;
              content: ‘‘;
              margin:auto;
              background: #d73d32;
     }
     /*:checked的input的边框变化*/
     #first input:checked+label{
        border:1px solid #d73d32;
     }

方法二: 直接利用雪碧图定位获取

css样式

      /*为所有的label设置宽高 背景*/
      #fisrt input+label{
          width: 16px;
          height:16px;
          border:none;
          display: inline-block;
          background:url(‘bg.png‘) no-repeat;
      }   
      /*利用雪碧图定位一开始的CheckBox radio背景*/
      #first input[type=‘checkbox‘]+label{
         background-position:-25px -32px;
      }
      #first input[type=‘radio‘]+label{
          background-position: -24px -10px;
      }
      /*利用雪碧图定位选中后的CheckBox radio背景*/
      #first input[type=‘checkbox‘]:checked+label{
          background-position: -60px -32px;
      }
      #first input[type=‘radio‘]:checked+label{
          background-position: -59px -10px;
      }

总结

两种方法都是通过设置label的样式代替原生的样式；前者是利用:before,:after来添加内容；后者是利用图片直接添加；这个过程都利用:checked触发动作而生成。

欢迎访问我的个人网站：博客地址