CSS修改radio的樣式(對勾效果和圓形效果)
阿新 • • 發佈:2020-08-12
在實際開發中經常會遇到修改radio按鈕的樣式,所以在這裡記錄一下,方便以後使用!!!
使用偽元素方法方式修改預設的radio和checkbox圖示。
Radio
效果圖:
具有程式碼如下:
可以按照具體需求進行修改
<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/> <label for="radio1">radio1</label> <input class="radio_type" type="radio" name="type" id="radio2" /> <label for="radio2">radio2</label>
label{ line-height: 20px; display: inline-block; margin-left: 5px; margin-right:15px; color: #777; } .radio_type{ width: 20px; height: 20px; appearance: none; position: relative; } .radio_type:before{ content: ''; width: 20px; height: 20px; border: 1px solid #7d7d7d; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:before{ content: ''; width: 20px; height: 20px; border: 1px solid #c59c5a; background:#c59c5a; display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:after{ content: ''; width: 10px; height:5px; border: 2px solid white; border-top: transparent; border-right: transparent; text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg); } .radio_type:checked+label{ color: #c59c5a; }
圓形款只需稍微修改一下css便好
label{ line-height: 20px; display: inline-block; margin-left: 5px; margin-right:15px; color: #777; } .radio_type{ width: 20px; height:20px; appearance: none; position: relative; } .radio_type:before{ content: ''; width: 20px; height: 20px; border: 2px solid #EDD19D;//可以再這裡更改按鈕邊框的顏色 display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:before{ content: ''; width: 20px; height: 20px; border: 2px solid #EDD19D;//可以在這裡顏色 display: inline-block; border-radius: 50%; vertical-align: middle; } .radio_type:checked:after{ content: ''; width: 12px; height: 12px; text-align: center; background:#EDD19D;//可以在這裡更改顏色 border-radius: 50%; display: block; position: absolute; top: 6px; left: 6px; } .radio_type:checked+label{ color: #EDD19D; }