纯CSS实现自定义单选框和复选框功能

元素没有特别的样式考虑——结构上， 是简单的行内元素，所以可使用和 或 元素大致相同的方式来应用样式。

2.2 CSS3 box-shadow 属性

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

 2.3 CSS3 transition 属性

transition 属性用来设置元素过渡效果，四个简写属性为：

transition-property

transition-duration

transition-timing-function

transition-delay

语法

transition: property duration timing-function delay;

  2.4 CSS3 :checked 选择器

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

2.5 CSS element+element 选择器

element+element 选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

例如：选择所有紧接着 元素之后的第一个

元素:

div+p{ background-color:yellow; }

3 代码实现

  
    
    
    
      #main {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
      }
 
      #wrap {
 position: relative;
 margin: 10px;
      }
 
      .item {
 width: 100px;
 height: 100px;
 background-color: #9E9E9E;
 position: relative;
 box-shadow: 0 0 0 3px #dbe0e3;
 transition: all 0.5s;
 cursor: pointer;
      }
 
      .item img {
 width: 20px;
 height: 20px;
 position: absolute;
 bottom: 0px;
 right: 0px;
 opacity: 0;
      }
 
     input[type="radio"],
      input[type="checkbox"] {
 display: none;
      }
 
      input:checked+label .item {
 box-shadow: 0 0 0 3px #00a3ff;
 color: #FFFFFF;
 background-color: #efad4c;
      }
 
      input:checked+label .item img {
 opacity: 1;
      }
      
      .content {
 font-size: 30px;
 text-align: center;
 line-height: 100px;
      }

  
  
    
      
      多选
      
   
 
   
     
1
     
     
   
 
      
      
      
 
 
   
     
2
     
     
   
 
      
      
      
 
 
   
     
3
     
     
   
 
      
      
      
 
 
   
     
4
     
     
   
 
      
      
      
 
 
   
     
5
     
     
   
 
      
      
      单选
      
   
 
   
     
1
     
     
   
 
      
      
      
 
 
   
     
2
     
     
   
 
      
      
      
 
 
   
     
3
     
     
   
 
      
      
      
 
 
   
     
4
     
     
   
 
      
      
      
 
 
   
     
5
     
     
   
 
      
    
  

到此这篇关于纯CSS实现自定义单选框和复选框功能的文章就介绍到这了,更多相关css 自定义单选框和复选框内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！