自定义样式（radio）的设置

作者: 我是何宝荣呀 | 来源:发表于2019-09-30 09:13 被阅读0次

小程序自定义单选按钮样式（微信）
自定义样式（radio）的设置
【微信小程序】 radio换行问题
高效-1自定义radio/checkbox样式
自定义element-ui radio选中样式
巧用CSS3伪类选择器自定义checkbox和radio的样式
关于radio样式的设置
权值叠加的问题
Axure通过多个单选按钮组合筛选动态面板状态
Android开发-RadioButton，CheckBox，I

首先，先由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checkbox:checked + i {
      color :red;
    }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" class="checkbox">
    <i>·</i>
  </label>
</body>
</html>

可以引导出，当点击input标签时，点的颜色也会随之发生变化
从而开始去隐藏前面的input标签，达到自定义样式的作用，而隐藏input标签我们可以采用，display为none的方式或者是opcity=0加定位的方式
这是伪元素的做法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checkbox {
      display: none;
      /*opacity: 0*/
    }
    .checkbox + i::after {
      content: '☆';
    }
    .checkbox:checked + i::after {
      content: '★';
    }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" class="checkbox">
    <i></i>
  </label>
</body>
</html>

再进一步的方法是

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checkbox {
      display: none;
      /*opacity: 0*/
    }
    .checkbox + i {
      display: inline-block;
      border-radius: 50%;
      content: ' ';
      width: 20px;
      height: 20px;
      background-color: #eee;
    }
    .checkbox:checked + i {
      background-color: skyblue;
    }
    .checkbox:checked + i::after {
      content: ' ';
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 5px;
      border-radius: 50%;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" class="checkbox">
    <i></i>
  </label>
</body>
</html>

效果图