偽元素製作核取方塊效果

2021-09-20 15:23:55 字數 1048 閱讀 3499

當我們在製作網頁時,想改變input框的樣式,比如改變它的邊框顏色或形狀而沒法改變時,我們考慮運用偽元素來設定,其方法如下:

html**:

css**:

body

.uls span

.uls .input_check

.uls .input_check+label

.uls .input_check:checked+label:after

效果圖如下所示:

html**:

remeber me

css**:

body

/* 隱藏核取方塊 */

[type=checkbox]

/* 核取方塊和label的起始屬性 */

[type=checkbox]+label

* 核取方塊未選中時的屬性 */

[type=checkbox]+label:before,

[type=checkbox]:not(.filled-in)+label:after

/* 核取方塊選中時的屬性 */

[type=checkbox]:checked+label:before

/* 當核取方塊選中時,取消未選中時的邊框 */

[type=checkbox]:not(.filled-in)+label:after

.checkbox

效果如下圖所示:

layui新增核取方塊 layui核取方塊使用介紹

layui核取方塊 效果圖layui核取方塊,乙個主的核取方塊控制多個從核取方塊,主核取方塊和從核取方塊的顏色不一樣 layui核取方塊的樣式,都是在選然後才會有的,所以直接通過css設定就實現不了了。只可以通過js動態設定 html 使用了jfinal的模板 i18n.get 所屬校區 for c...

layui新增核取方塊 layui核取方塊使用介紹

layui核取方塊 效果圖layui核取方塊,乙個主的核取方塊控制多個從核取方塊,主核取方塊和從核取方塊的顏色不一樣 layui核取方塊的樣式,都是在選然後才會有的,所以直接通過css設定就實現不了了。只可以通過js動態設定 html 使用了jfinal的模板 i18n.get 所屬校區 for c...

treegrid核取方塊

然後是 html檔案 consle 說明 沒什麼內容,標題,然後是乙個 我為了做些測試放了個按鈕consle,不用刪掉即可,當然要引用幾個js檔案和css檔案 jquery easyui demo 接著是js檔案 function width 180 consle bind click consle...