Css改變checkbox的樣式

2021-08-02 05:26:16 字數 563 閱讀 3287

乙個核取方塊:

帶文字的:

核取方塊的顏色,和對勾的顏色都是可以更改的。

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...