使用CSS自定义radio、checkbox样式的示例详解-css教程-PHP中文网

使用CSS自定义radio、checkbox样式的示例详解

黄舟

发布： 2017-05-26 13:21:53

原创

2348 人浏览过

以前做自定义样式的radio, checkbox 的时候，一直是如下结构

<label>
    <span class="diyRadio">
        <input type="radio" name=" value="">
    </span>
    <span>文字</span>
</label>

登录后复制

然后定义diyRadio 的样式作为新Radio, 再用js 做关联。

知道今天才知道可以用标签的for 属性 + :checked 做，纯CSS
（ 真是太不应该了，学东西还是要认真、细致点。 ）

DIY 单选项示例如下：

<!-- HTML -->
<p class="radio-beauty-container">
    <label>
        <span class="radio-name">radio1</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio2</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">radio3</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</p>

登录后复制

/* CSS */
.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}

登录后复制

以上是使用CSS自定义radio、checkbox样式的示例详解的详细内容。更多信息请关注PHP中文网其他相关文章！