CSS單選框是一種常用的用戶輸入控件,通常用于選項的選擇。
然而,有時候我們可能需要將默認的圓形單選框變成方框,以適應特定的設計風格。
下面介紹一種用CSS將單選框變成方框的方法:
input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 0; margin: 0; cursor: pointer; } input[type=radio]:checked { background-color: #ccc; }
以上樣式使用了appearance: none;
將默認的樣式去掉,并設置了display: inline-block;
、width: 20px;
、height: 20px;
、border: 1px solid #ccc;
和border-radius: 0;
來定義方框的樣式。
另外,為了使選中的單選框有明顯的變化,我們使用:checked
偽類來設置背景顏色。
使用上述方法,我們便可以輕松將CSS單選框變成方框,以適應不同的設計需求。
下一篇css卸載