默认的radio样式：
需要实现的效果：
<html lang="zh-CN">
<head>
</head>
<body>
<div class="input_radio">
<input type="radio" name="item" value="男生">
<label>男生</label>
</div>
<div class="input_radio">
<input type="radio" name="item" value="女生">
<label>女生</label>
</div>
</body>
</html>
// 默认写的是scss文件，直接复制运行不生效的，请自行转换成css样式
.input_raido {
position: relative;
line-height: 30px;
input[type="radio"] {
width: 70px;
// 这里把默认的圆点透明度设置为0，并且把 label 标签的层级设置成高于默认的radio层级
opacity: 0;
}
label {
position: absolute;
left: 0;
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
// 点击显示成绿色部分，其实是radio的部分，只不过对radio进行了透明处理而已。
z-index: -1;
background-color: #eee;
border-radius: 50px;
color: #333;
}
/*设置选中的input的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
input:checked+label {
background-color: #6ad33b;
border-radius: 50px;
color: white;
}
}
注：
既然说到了input的部分，我就顺便再提几个关于input / textarea 的小知识点：
1、如何去除手机客户端上textarea input 文本标签的上阴影边框：
解决方法（下面以textarea为例：）：
textarea {
-webkit-appearance: none;
}
2、如何更改input、textarea框中placeholder的文字颜色；
// 解决方法（下面以 textarea 为例，更改textarea中placeholder中的颜色为#ccc）：
textarea::-webkit-input-placeholder {
color: #ccc;
}
textarea::-moz-placeholder {
color: #ccc;
}
textarea:-ms-input-placeholder {
color: #ccc;
}
网友评论