自定義核取方塊樣式

2021-08-03 05:47:37 字數 1252 閱讀 2516

專案開發中嫌棄checkbox自帶樣式,查一下資料,找到怎麼自定義checkbox樣式,記錄下來,作為筆記

html:

*******label一定要放在input後面*************

<

divclass="checkone inline">

<

inputtype="checkbox"id="checkbox"(click)="clickme($event

)">

<

labelfor="checkbox">

label>

div>

css:

首先把原有的checkbox樣式隱藏

/*修改input[type=checkbox]的自帶樣式*/

input[type=checkbox]

/*外層div*/

.checkone

/*label設定*/

.checkone label

.checkone label:after

.checkone label:hover::after

.checkone input[type=checkbox]:checked+label:after

html自定義核取方塊

自定義核取方塊的素材 icon check circle.png icon checked.png checkbox.html 為了方便起見,這裡使用到了jquery remember me 效果圖如下 未選中狀態 選中狀態 為提交表單時,考慮將核取方塊的內容進行提交,對上述的自定義核取方塊進行了如...

CSS自定義綠色核取方塊按鈕樣式

html自帶的核取方塊或者單選框按鈕樣式都是比較簡單的一種.而有時候這些表單控制,可能需要配合自己的主題樣式.需要去美化他們.以前可能需要借助js的實現.現在css也可以完全實現我們想要的效果.效果圖 我們直奔主題.首先想到的是,核取方塊需要的是乙個背景色,然後就是乙個核取方塊選中的狀態.選中狀態我...

自定義單選按鈕 核取方塊

一直以來都對單選按鈕 radio 核取方塊 checkbox 的預設樣式感到頭疼,不夠美觀!恰好學習css3 學到了乙個選擇器 checked,學著做了乙個簡單的樣式自定義。主要的思想在於 設定自帶的樣式的透明度為0,然後使用絕對定位混淆視聽 先來說說單選按鈕 如下 css 1 style type...