默認的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;
}