如何改寫原生input type="radio"的樣式
阿新 • • 發佈：2019-02-11
預設的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" // 預設寫的是scss檔案，直接複製執行不生效的，請自行轉換成css樣式
.input_raido {
position: relative;
line-height: 30px;
input[type="radio"] {
width: 70px;
// 這裡把預設的圓點透明度設定為0，並且把 label 標籤的層級設定成高於預設的radio層級
opacity: 0;
}
label 注：
既然說到了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;
}