看1级片

<form id=AfNFovhOf><nobr id=AfNFovhOf></nobr></form>

<address id=AfNFovhOf><nobr id=AfNFovhOf><nobr id=AfNFovhOf></nobr></nobr></address>

0

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

checkbox html html5 css css3

anniecat 2020-07-31 16:28:25 ? 22559 瀏覽

分享至

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

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

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

登入發表討論

熱門推薦

{{ item.subject }}

{{ item.channelVendor }} | {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

4 個回答

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的話，只能利用其它元件來做出模式出來了。
網路上你找一下有很多範例可以用。我這只給你簡單的處理。

回應 3
分享
檢舉

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

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

㊣浩瀚星空㊣ iT邦大神 1 級 ? 2020-08-04 09:59:09 檢舉

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

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

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

登入發表回應

2

通靈亡

iT邦高手 1 級 ? 2020-07-31 16:35:16

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

回應
分享
檢舉

登入發表回應

1

ckp6250

iT邦好手 1 級 ? 2020-07-31 19:44:36

用人家的最快

https://demos.telerik.com/kendo-ui/checkbox/index

回應
分享
檢舉

登入發表回應

1

harry xie

iT邦研究生 1 級 ? 2020-07-31 20:05:16

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

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

216 組

團體組數

8 組

累計文章數

890 篇

最後報名日

9/15

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

HoME 看1级片