表單單選框樣式是網頁開發中必不可少的一種表單樣式。通過CSS可以對單選框進行自定義樣式的設置,給網站增加更具個性化的效果。以下是一些常見的表單單選框樣式設置:
/*設置單選框邊框顏色和大小*/ input[type="radio"] { border: 1px solid #ccc; border-radius: 50%; width: 20px; height: 20px; } /*去除單選框默認外觀*/ input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } /*自定義單選框的選中狀態*/ input[type="radio"]:checked:before { content: "\2713"; display: block; text-align: center; line-height: 20px; color: blue; }
以上代碼中,input[type="radio"]
選擇器用于選中所有單選框輸入框,并設置其邊框顏色、大小和圓角。而appearance
屬性則用于取消單選框默認的外觀,從而可以自定義單選框的外觀。
最后,我們通過:checked
偽類選擇器來設置單選框選中狀態下的樣式。在這里,我們使用字符實體"\2713"來代表一個勾選的圖標,并設置了該圖標的顏色和對齊方式。
上一篇mysql 破解教程
下一篇表單搜索框不顯示css