[分享]css两个单选框

在前端开发中，我们经常会用到单选框来实现选项的选择。而在CSS中，我们也可以通过单选框样式美化来增加页面的交互性。下面展示两个单选框的例子： 选项1 选项2 以上代码使用了input标签和labe...

在前端开发中，我们经常会用到单选框来实现选项的选择。而在CSS中，我们也可以通过单选框样式美化来增加页面的交互性。

下面展示两个单选框的例子：

 <input type="radio" id="radio1" name="radioBtn" checked>
  <label for="radio1">选项1</label>

  <input type="radio" id="radio2" name="radioBtn">
  <label for="radio2">选项2</label> 

以上代码使用了input标签和label标签来创建单选框。其中，input标签的type属性为radio，name属性为radioBtn，表示这两个单选框是同一组。label标签的for属性对应input标签的id属性，实现了单选框与文字的关联。

下面通过CSS美化单选框的外观：

 input[type="radio"] {
    display: none;
  }
  
  input[type="radio"] + label {
    color: #666;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
  }
  
  input[type="radio"] + label:before {
    content: ';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 1px;
  }
  
  input[type="radio"]:checked + label:before {
    border-color: #0af;
  }
  
  input[type="radio"]:checked + label:after {
    content: ';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0af;
    position: absolute;
    left: 4px;
    top: 5px;
  } 

以上代码实现了单选框的美化效果。首先，将input标签的display属性设置为none，将单选框隐藏。然后，利用CSS在label标签前添加一个伪元素，实现了单选框的样式。当选中单选框时，通过:checked选择器改变伪元素的样式，表示选中状态，同时在伪元素后面再添加一个元素，表示选中状态的小圆点。

通过上述代码，我们可以实现单选框的美化效果，从而增强页面的交互性和美观度。