如何客製化CSS

css3 javascript html

calvintai63 2023-09-18 15:08:47 ‧ 1781 瀏覽

分享至

請問如下的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;
}

看更多先前的討論...收起先前的討論...

窮嘶發發發 iT邦高手 1 級 ‧ 2023-09-18 16:14:00 檢舉

通常布局的安排
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
用他已經定義好的，會比較快

calvintai63 iT邦新手 2 級 ‧ 2023-09-18 21:18:30 檢舉

謝謝您,您的意見很寶貴,類似這樣:
.chkbox-group1 .bg1 ,.chkbox-group1 .bg1 input
{ background-color:var(--default);}
這複雜的設定語法正是我想知道的,謝謝您,我再來試試

窮嘶發發發 iT邦高手 1 級 ‧ 2023-09-19 17:30:25 檢舉

以下是另外一種寫法
<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);}

calvintai63 iT邦新手 2 級 ‧ 2023-09-20 09:25:24 檢舉

這個語法我測試結果也很好,能達到我想要的結果.語法也很精簡,直覺,好用,謝謝您.這個討論串我學到很多不同的實作法,謝謝各位大大.

登入發表討論

直播研討會

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

直播中

3 個回答

Annie

iT邦新手 2 級 ‧ 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 上，可以看看是否符合你的需求～

希望有幫上忙！

回應 1
分享
檢舉

calvintai63 iT邦新手 2 級 ‧ 2023-09-18 21:14:38 檢舉

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

登入發表回應

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;
}