zoukankan      html  css  js  c++  java
  • input radio单选框样式优化

      HTML代码:

      

     1 <form>
     2       <div>
     3         <input id="item1" type="radio" name="item" value="水果" checked>
     4         <label for="item1"></label>
     5         <span style="margin-left: 10px">水果</span>
     6       </div>
     7       <div>
     8         <input id="item2" type="radio" name="item" value="饮料">
     9         <label for="item2"></label>
    10         <span style="margin-left: 10px">饮料</span>
    11       </div>
    12     </form>

      css代码:

      

     1 div {
     2   position: relative;
     3   line-height: 30px;
     4 }
     5 
     6 input[type="radio"] {
     7   width: 20px;
     8   height: 20px;
     9   opacity: 0;
    10 }
    11 
    12 label {
    13   position: absolute;
    14   left: 5px;
    15   top: 8px;
    16   width: 20px;
    17   height: 20px;
    18   border-radius: 50%;
    19   border: 1px solid #999;
    20 }
    21 
    22 /*设置选中的input的样式*/
    23 /* + 是兄弟选择器,获取选中后的label元素*/
    24 input:checked+label {
    25   background-color: #006eb2;
    26   border: 1px solid #006eb2;
    27 }
    28 
    29 input:checked+label::after {
    30   position: absolute;
    31   content: "";
    32   width: 5px;
    33   height: 10px;
    34   top: 3px;
    35   left: 6px;
    36   border: 2px solid #fff;
    37   border-top: none;
    38   border-left: none;
    39   transform: rotate(45deg)
    40 }

      效果图:

      

  • 相关阅读:
    PTP 接线方式及通讯距离
    串口通信基本概念
    Modbus RTU 通信应用案例
    Modbus 指令
    Modbus RTU新版本指令介绍
    Integer自动装箱和拆箱
    重写hashCode方法,导致内存泄漏
    Dom4j入门
    Java设计模式(9)——观察者模式
    IntelliJ IDEA版本控制——过滤提交文件
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/7878154.html
Copyright © 2011-2022 走看看