iT邦幫忙

0

如何改變checkbox核取方塊的顏色或樣式

目前實作當checkbox被勾選時,原本預設為深灰色底 淺灰色打V

目前希望可以調整為 黑色底、白色打V 或是 白色底、黑色打X

有先嘗試在網路上找了一下方法,但沒有找到相關應用,想詢問看看可以怎麼實作,或是否有其他的做法呢?

1
浩瀚星空
iT邦超人 1 級 ‧ 2020-07-31 16:39:24
最佳解答

直接使用元件呈現的話。變色可以用如下的css來處理

label {
            padding: 0;
            margin-right: 3px;
            cursor: pointer;
        }
        
        input[type=checkbox] {
            display: inline-block;
            background-color: #aaa;
            padding: 3px 6px;
            border: 1px solid gray;
            color: #444;
            user-select: none; /* 防止文字被滑鼠選取反白 */
        }

        input[type=checkbox]:checked {
            color: yellow;
            background-color: #444;
        }

要有打x的話,只能利用其它元件來做出模式出來了。
網路上你找一下有很多範例可以用。我這只給你簡單的處理。

anniecat iT邦新手 3 級 ‧ 2020-08-04 09:53:20 檢舉

浩瀚星空,自己嘗試寫出了這樣的範例,可能會在鑽研一下看要怎麼調整,最終目標是希望可以做出這樣的樣子(白底黑X),謝謝你的幫忙~
https://ithelp.ithome.com.tw/upload/images/20200804/20115336BSLGCPcF5c.png

核取框不會出現x的。
所以你只能用圖片或是div元件來模擬成核取框

anniecat iT邦新手 3 級 ‧ 2020-08-04 16:05:04 檢舉

好的,我再嘗試看看~謝謝!

2
通靈亡
iT邦研究生 5 級 ‧ 2020-07-31 16:35:16

The Net Ninja 這個系列的教學可能是你需要的東西:
https://www.youtube.com/watch?v=HiHHvTcHiEk&list=PL4cUxeGkcC9g5_p_BVUGWykHfqx6bb7qK

1
harry xie
iT邦新手 4 級 ‧ 2020-07-31 20:05:16

google 搜尋關鍵字 checkbox custom 就蠻多資料可以讀了~~

我要發表回答

立即登入回答