css3修改input[type=radio]样式
生活随笔
收集整理的這篇文章主要介紹了
css3修改input[type=radio]样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在項目中經常，需要使用單選按鈕input[type=radio]，但是瀏覽器的默認樣式可能與我們需要實現的樣式差距很大，可以使用css3來實現想要達到的效果：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;width: 20px;height: 20px;border-radius: 50%;border: 1px solid #999;}/*設置選中的input的樣式*//* + 是兄弟選擇器,獲取選中后的label元素*/input:checked+label {background-color: #349EDF;border: 1px solid #349EDF;}input:checked+label::after {position: absolute;content: "";width: 5px;height: 10px;top: 3px;left: 6px;border: 2px solid #fff;border-top: none;border-left: none;transform: rotate(45deg)}</style> </head><body><div><input id="item1" type="radio" name="item" value="item1" checked><label for="item1"></label><span>選項一</span></div><div><input id="item2" type="radio" name="item" value="item2"><label for="item2"></label><span>選項二</span></div> </body> </html>實際效果如圖：
總結
以上是生活随笔為你收集整理的css3修改input[type=radio]样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机通讯录html模板,手机通讯录导模板
- 下一篇： Faster-RCNN.Pytorch的