CSS3單選按鈕是一種非常普遍的網頁交互控件,下面我們來介紹一下如何使用CSS3代碼創建單選按鈕。
/* 單選按鈕樣式 */ input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } /* 單選按鈕樣式 - 背景 */ input[type="radio"] + label { position: relative; padding-left: 28px; cursor: pointer; display: inline-block; color: #666; font-size: 16px; line-height: 20px; } /* 單選按鈕樣式 - 關閉 */ input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: white; } /* 單選按鈕樣式 - 打開 */ input[type="radio"]:checked + label:before { background: #4CAF50; border-color: #4CAF50; color: white; }
上述代碼中,首先定義了單選按鈕的樣式,包括它們的位置、大小以及透明度。然后定義了單選按鈕的背景樣式,包括按鈕的對齊方式、字體大小、顏色等。接下來,定義了單選按鈕關閉狀態下的樣式,包括按鈕的邊框、圓角、背景等。最后,定義了單選按鈕打開狀態下的樣式,包括按鈕背景色、邊框顏色和文本顏色。
使用CSS3單選按鈕代碼可以為網頁交互控件添加樣式和美觀性。但是需要注意的是,為了能夠兼容所有瀏覽器,最好在代碼中添加瀏覽器前綴。
上一篇css3單詞大全