使用CSS怎么实现一个单选框和复选框功能-创新互联

使用CSS怎么实现一个单选框和复选框功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目网站制作、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元新晃做网站,已为上家服务,为新晃各地企业和个人服务,联系电话:18982081108

在html中,


文本内容

关联控件的id一般指的是input元素的id;在html5中还新增了一个属性form,form属性是用来规定所属的一个或多个表单的 id 列表,以空格隔开;当

中时,就需要使用form属性来指定所属表单;

2.2 CSS3 box-shadow 属性

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

语法:

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

使用CSS怎么实现一个单选框和复选框功能

 2.3 CSS3 transition 属性

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

transition-property

transition-duration

transition-timing-function

transition-delay

语法

transition: property duration timing-function delay;

使用CSS怎么实现一个单选框和复选框功能

  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怎么实现一个单选框和复选框功能-创新互联
标题链接:
http://myzitong.com/article/cdcgps.html

其他资讯