CSS可以很方便的美化HTML表單,其中單選框也不例外。下面將介紹CSS如何設置單選框的樣式。
/* 隱藏原始單選框 */ input[type="radio"] { display: none; } /* 自定義單選框樣式 */ input[type="radio"] + label:before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 5px; background-color: #fff; border: 2px solid #999; border-radius: 50%; } /* 鼠標懸停時背景色 */ input[type="radio"] + label:hover:before { border-color: #666; } /* 選中時樣式 */ input[type="radio"]:checked + label:before { background-color: #666; border-color: #666; } /* 禁用狀態樣式 */ input[type="radio"]:disabled + label:before { background-color: #ccc; border-color: #ccc; }
需要注意的是,自定義單選框必須和label元素配合使用,并且這兩個元素必須同時出現在HTML中,且label的for屬性值要和input的id屬性值相同。
通過上述CSS樣式設置,可以輕松地美化單選框,提升表單的用戶體驗,讓頁面看起來更加專業和美觀。
上一篇mysql控制臺按鍵失靈
下一篇mysql控制臺改表名