乙個核取方塊:
帶文字的:
核取方塊的顏色,和對勾的顏色都是可以更改的。
html**結構:
css**:
/*#region checkbox樣式 */
span
span input
span label
/*建立方框中的對勾,對於這一點,我們可以使用:after偽類建立乙個新的元素,為了實現這個樣式,我們可以建立乙個5px x 9px的長方形並給他加上邊框。
這時候我們去掉上面和右邊的邊框之後,它會看起來像乙個字母l。然後我們可以使用css的transform屬性讓它旋轉一下,這樣看起來就像是乙個對勾。*/
span label::after
label:hover::after
input[type=checkbox]:checked + label:after
/*#endregion */
單選按鈕也一樣,設定邊框的圓角 border-radius:50%; 純CSS改變CheckBox樣式
完成效果 html 結構 將check的框調到最左邊,並且隱藏 ckbclass將checkbox的label設定成關閉時所要顯示的 ckbclassoff將checkbox選中狀態時的label設定成開啟時所要顯示的 mailsettingswitch input type checkbox ch...
Css實現checkbox及radio樣式自定義
checkbox和radio樣式自定義在網頁中是很常見的,比如在進行表單輸入時性別的選擇,使用者註冊時選擇已閱讀使用者協議。隨著使用者對產品體驗要求越來越高,我們都會對checkbox和radio重新設計,checkbox預設的樣式非常醜 無法直接修改checkbox和radio的樣式,這裡我們借助...
Android中設定checkbox的樣式
一 修改checkbox選項框樣式 首先我們要找到兩張checkbox選項框的 normal.png checked.png 然後我們設定乙個背景選擇器checkbox style.xml xml version 1.0 encoding utf 8 selector xmlns android i...