CSS3 單選按鈕樣式可以為單選按鈕添加顏色、大小和其他樣式。在這篇文章中,我們將介紹如何使用 CSS3 單選按鈕樣式來創建自定義單選按鈕。
input[type="radio"] { width: 20px; height: 20px; } input[type="radio"]:checked::before { content: "\2022"; font-size: 30px; color: #5cb85c; }
首先,我們使用 input[type="radio"] 選擇器來選擇單選按鈕。在這里,我們設置了單選按鈕的寬和高為 20px。這可以根據你的需要進行調整。
接下來,我們使用 input[type="radio"]:checked 選擇器來選擇已選中的單選按鈕。在這里,我們使用偽元素 ::before 來添加一個圓點。使用 content 屬性,我們將 Unicode 字符“\2022”插入到圓點中。您可以根據需要更改字符。
在這里,我們還設置了圓點的大小為 30px,并將其顏色設置為綠色(#5cb85c)。您可以根據您的需求進行調整。
既然你知道如何使用 CSS3 單選按鈕樣式來創建自定義單選按鈕,趕緊嘗試一下并為你的網站添加漂亮的單選按鈕吧!