核取方塊checkbox樣式修改

2022-07-28 17:27:36 字數 674 閱讀 7965

該方法只相容ie9及以上

將checkbox和label關聯起來,

將checkbox隱藏掉,通過點選label來點選checkbox,label的樣式即可自定義。

通過checkbox:checked + label:after來控制點選之後的符號

通常我們使用以下html結構,我們給核取方塊定義id#checkbox_a1,然後使用label的for屬性與之關聯,這樣的話,使用者點選label的時候,實際上就相當於點選了#checkbox_a1。

type="checkbox" id="checkbox_a1" class="chk_1" /> 

for="checkbox_a1">check

通過label和checkbox,我們可以將checkbox隱藏,而將label製作為各種漂亮超酷的核取方塊樣式。我們可以使用:before和:after偽元素來製作各種效果,如滑動按鈕的效果。這些效果都可以通過相鄰兄弟選擇器來選擇與checkbox相鄰的label來實現,下面是乙個簡單的例子:

.chk_1 .chk_1 + label .chk_1 + label:active .chk_1:checked + label .chk_1:checked + label:after

checkbox核取方塊樣式

隨著現代瀏覽器的流行,純css設定checkbox也變的很是實用,下面會講到5種與眾不同的checkbox核取方塊。首先,需要新增一段css隱藏所有的checkbox核取方塊,下面我們會改變它的外觀。要做到點需要新增一段 到你的css檔案中。隱藏預設的checkbox input type chec...

css修改核取方塊預設樣式

不知道小夥伴們在使用核取方塊 checkbox 的時候有沒有覺得預設的樣式實在太醜了,自己想換乙個好看點的樣式又感覺挺麻煩的,前幾天博主就遇到了這個麻煩,然後翻閱了書籍找到了解決方法,現在和大家分享一下 我們先看一下核取方塊的預設樣式,這種預設的核取方塊樣式還是不夠美觀的,那麼下面我們把它美化一下 ...

MFC中核取方塊 checkbox

來自 http blog.csdn.net dongzhongshu archive 2010 06 30 5705138.aspx checkbox是一種特殊的按鈕 得到核取方塊狀態的函式 cbutton pbtn cbutton getdlgitem idc check int state pb...