iT邦幫忙

2

如何客製化CSS

  • 分享至 

  • xImage

請問如下的CSS,僅提供一種checkbox式樣,但因為需在於checked時顯示的顏色不一樣,而複製了好幾個式樣,請問有無方法精減css,例如傳遞參數給css使得checked時顯示不同,或是透過javascript在html剛載入時,設定好各個checkbox有不同的checked顏色.請問如何做比較好?

供測試的html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Pure CSS Custom Radio Buttons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="chkbox-yellow">
      <input type="checkbox" name="">
</div>
<div class="chkbox-green">
      <input type="checkbox" name="">
</div>
<div class="chkbox-red">
      <input type="checkbox" name="">
</div>
  
</div>
<div class="chkbox-blue">
      <input type="checkbox" name="">
</div>  
    
 
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

目前的CSS檔案如下:


.chkbox-yellow  input{
    width: 2rem;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: grey;
    background-size:2rem 2rem;
}
.chkbox-yellow input:checked{
    background-color: yellow;
    background-size:2rem 2rem;
}

.chkbox-green  input{
    width: 2rem;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: grey;
    background-size:2rem 2rem;
}

.chkbox-green input:checked{
    background-color: green;
    background-size:2rem 2rem;
}

.chkbox-red  input{
    width: 2rem;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: grey;
    background-size:2rem 2rem;
}

.chkbox-red input:checked{
    background-color: red;
    background-size:2rem 2rem;
}

看更多先前的討論...收起先前的討論...
通常布局的安排
CHKBOX 後面會接一個 LABEL TAG,來顯示這各 CHKBOX 的意義
因此正常的布局會是
HTML 部分
<form>
<div class="chkbox-group1">
 <div class="bg1"><input type="checkbox" name="1"> <label>1</label></div>
 <div class="bg2"><input type="checkbox" name="2"> <label>2</label></div>
 <div class="bg3"><input type="checkbox" name="3"> <label>3</label></div>
</div>
</form>
CSS 部分
:root{
--default: #777;
--primary: #337ab7;
--success: #5cb85c;
--info: #5bc0de;
--warning: #f0ad4e;
--danger: #d9534f;
}

.chkbox-group1 .bg1 ,.chkbox-group1 .bg1 input
{ background-color:var(--default);}

.chkbox-group1 .bg2 ,.chkbox-group1 .bg2 input
{ background-color:var(--primary);}

.chkbox-group1 .bg3 ,.chkbox-group1 .bg3 input
{ background-color:var(--danger);}

這邊的建議是這樣,先把顏色定義出來,之後的元素的可以直接使用會比較方便
而且把顏色語意化,你使用的時候就會很容易
我上面的顏色是參考 bootstrap 常用顏色定義的,
如果你不想定義這些,也可以去載入 bootstrap
用他已經定義好的,會比較快
謝謝您,您的意見很寶貴,類似這樣:
.chkbox-group1 .bg1 ,.chkbox-group1 .bg1 input
{ background-color:var(--default);}
這複雜的設定語法正是我想知道的,謝謝您,我再來試試
以下是另外一種寫法
<form>
<div class="chkbox-group1">
 <div bg="gray"><input type="checkbox" name="1" bg="gray"> <label bg="gray">1</label></div>
 <div bg="green"><input type="checkbox" name="2" bg="green"> <label bg="green">2</label></div>
 <div bg="red"><input type="checkbox" name="3" bg="red"> <label bg="red">3</label></div>
</div>
</form>

CSS 的部分
:root{
--gray: gray;
--green: green;
--red: red;
}
*[bg="gray"]{ background-color:var(--gray);}
*[bg="green"]{ background-color:var(--green);}
*[bg="red"]{ background-color:var(--red);}
這個語法我測試結果也很好,能達到我想要的結果.語法也很精簡,直覺,好用,謝謝您.這個討論串我學到很多不同的實作法,謝謝各位大大.
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
6
Annie
iT邦新手 1 級 ‧ 2023-09-18 18:01:05
最佳解答

我這邊分享一個自己常用的方式,跟其他位前輩們的回答都是一樣具有客製化的樣式調整功能。但是我使用的是 CSS 裡的客製化屬性,也就是 custom properties (variables),差異是我不是在 class 名稱上使用名稱去辨別,這樣的寫法可以讓 CSS 再彈性自由一點,不會一直要針對各個顏色去增加樣式,而顏色是用變數的方式從 HTML 裡去給 CSS。

如果針對 CSS 的變數有想深入研究如何應用,可以參考這份 MDN 文件

另外關於 checkbox 的客製化應用,我覺得這篇文章(How to style a checkbox using CSS?)很清楚,一併提供給您。

針對你在文章開頭提到,希望 checked 時顯示的顏色不一樣的效果,也為了避免上述文章與連結日後更新導致無法觀看,我也有直接實作在 我的 codepen 上,可以看看是否符合你的需求~

希望有幫上忙!

https://ithelp.ithome.com.tw/upload/images/20230918/20140920hqWB2QzkHS.png

謝謝您,hokou大的方法比較簡單實作,單純一點,適合我這樣的初學者使用,您的方法感覺很專業,我也在學bootstrap,感覺bootstrap就是類似您這樣的概念去使用(我很初階,可能說的不對),利用參數使客製化更多樣,這也正是我想學的,非常謝謝您提供寶貴的意見

3
hokou
iT邦好手 1 級 ‧ 2023-09-18 15:14:23

一個通用的 checkbox 再另外加顏色的 class 呢?

<div class="chkbox yellow">
      <input type="checkbox" name="">
</div>
<div class="chkbox green">
      <input type="checkbox" name="">
</div>
.chkbox  input{
    width: 2rem;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: grey;
    background-size:2rem 2rem;
}

.yellow input:checked{
    background-color: yellow;
}

.green input:checked{
    background-color: green;
}

這個寫法比我原來po的好很多,謝謝您.

1
aa
iT邦新手 5 級 ‧ 2023-09-18 16:30:58

可以多設定幾個不同顏色的class

是的,方法理解了,實作時會加上更多的顏色,謝謝您

我要發表回答

立即登入回答