css改单选框样式

最新推荐文章于 2023-06-27 14:10:05 发布

_非鱼

最新推荐文章于 2023-06-27 14:10:05 发布

阅读量1.8k

点赞数 1

文章标签：单选框样式

本文链接：https://blog.csdn.net/Gray_Amon/article/details/82686420

版权

项目上经常需要自定义样式的单选(复选)框，然后做过又老是忘，就在这儿记录下吧。

html结构

<div class="sex">
    <div>
        <input type="radio" id="female" name="sex">
        <label for="female">男</label>
    </div>
    <div>
        <input type="radio" id="male" name="sex">
        <label for="male">女</label>
    </div>
</div>

css样式

.sex {
    margin-top: 20px;
    height: 18px;
    padding-left: 116px;
}

.sex div {
    display: inline-block;
    width: 42px;
    margin-right: 34px;
    position: relative;
}

.sex div label {
  position: relative;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
}

.sex div input[type="radio"] {
	display: none;
}

.sex div input[type="radio"] + label::before {
    margin-top: -4px;
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: middle;
    box-sizing: border-box;
    background-image: url("1.png");
}

.sex div input[type='radio']:checked+label:before{
  background-image: url("2.png");
  background-position: center center;
}

第一篇博客，以后要多更新记录寄几的开发点滴~