css 模拟 radio样式

2024年3月15日 108次阅读 来源: 小渝人儿

css:

.check-box {
  margin: 0 10px;
  cursor: pointer;
}
.check-box:before {
  content: '';
  background: #ffffff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 100%;
  cursor: pointer;
  vertical-align: bottom;
}
.check-box.checked:before {
  background: #9ec707;
}

html:

<div style="background: #000; color: #fff; padding: 10px;">
        选择操作系统：
        <span class="check-box ">
            CentOS
        </span>
        <span class="check-box checked">
            Ubuntu / Debian
        </span>
</div>
    原文作者：小渝人儿
    原文地址: https://segmentfault.com/a/1190000006813794
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞