欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css 修改單選按鈕樣式

錢多多1年前8瀏覽0評論

CSS可以通過修改單選按鈕的樣式來美化網頁,下面將介紹一些方法。

/* 隱藏原有單選按鈕 */
input[type=radio] {
position: absolute;
left: -9999px;
}
/* 自定義單選按鈕樣式 */
input[type=radio] + label {
position: relative;
cursor: pointer;
}
/* 未選擇狀態下的樣式 */
input[type=radio] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #999;
margin-right: 10px;
vertical-align: middle;
}
/* 選擇狀態下的樣式 */
input[type=radio]:checked + label:before {
background-color: #009688;
}

上述代碼首先隱藏了原有的單選按鈕,然后使用偽元素:before來創建自定義的按鈕樣式。樣式中使用了cursor屬性來改變鼠標的樣式為手型,增加了一些微調的屬性來讓單選按鈕更加美觀。最后,根據單選按鈕的選中狀態來修改樣式,提高用戶體驗。