iT邦幫忙

0

checkbox css 修改樣式問題

最近我需要把checkbox做調整

理想狀態大概如這個網站

https://codepen.io/MatthewShields/pen/XgeRWj

由於我會用到AJAX回傳的值做判斷是否要做修改樣式

所以我做成這樣

http://jsfiddle.net/vqm7f1ke/1/

只是目前遇到的問題是,我好像只有大小有改到,顏色卻沒有任何變化

請問這個我該如何修改呢?

看更多先前的討論...收起先前的討論...
firecold iT邦新手 1 級 ‧ 2020-12-07 11:12:15 檢舉
我看你寫的js不是只有把check內容塞進text嘛
沒看到顏色大小阿
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 11:21:00 檢舉
抱歉抱歉,忘了儲存,已修改
你可以跟我說一下哪裡有改到大小嗎
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 12:18:36 檢舉
"width":" 15px",
"height": "15px",
這兩行就有改到
zzxcv741 iT邦新手 5 級 ‧ 2020-12-07 12:19:26 檢舉
你測試過了嗎? 真的有改到嗎XD
zzxcv741 iT邦新手 5 級 ‧ 2020-12-07 12:38:40 檢舉
checkbox/radio內建似乎是不能修改背景顏色的,你想自訂樣式最好的方式是把checkbox給display:none掉,然後去控制label的外觀,大小、背景顏色、方形圓形之類的都可以很方便用css控制。這部分你搜尋自訂checkbox樣式google很多教學。
zzxcv741 iT邦新手 5 級 ‧ 2020-12-07 12:39:53 檢舉
如果你只是單純要改checkbox大小的話 css 設定
input[name='SelectItemList']:checked{
zoom: 150%;
}
就可以了。不須用到JQ,但還是上面的方法彈性大很多~
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 13:02:23 檢舉
其實我是希望能把打勾改成顏色,大小部分我自己測試是有的
點進去看,有打勾的那個就比較大一點點
會用JQ是因為我目前正在做唯讀的功能
那我是用
$('input[name="SelectItemList"]').prop("disabled", true);
但顯示出來是灰壓壓的一片不太好看
所以才想改個顏色
大小真的有欸 不過顏色的話可能改不了哦
要用偽元素去改
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 13:25:14 檢舉
https://i.imgur.com/R5QrNSB.jpg
你直接複製上面 codepen 的樣式改成 disabled 就好了啊
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 13:34:46 檢舉
那我能請問有辦法用JS判斷要不要使用這些CSS嗎?
可以啊 用 class
要使用的時候再加 class
zzxcv741 iT邦新手 5 級 ‧ 2020-12-07 14:44:15 檢舉
jq就判斷何時要 addClass 哪一個就好
tenno081 iT邦研究生 4 級 ‧ 2020-12-07 16:29:23 檢舉
感謝各位,目前算是弄了雛型
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
ckp6250
iT邦好手 1 級 ‧ 2020-12-07 11:53:37

瀏覽器原生的 checkbox 實在是又小又醜,大家都想改。

我採用的是另一個,引入 css 檔,然後在每個 checkbox 物件上增加 class 屬性即可。

/* .squaredFour */
.squaredFour {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 20px auto;
  cursor: pointer;
  vertical-align: middle ;
  label {
	vertical-align: middle ;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }
}
/* end .squaredFour */

效果也不差!

https://ithelp.ithome.com.tw/upload/images/20201207/20119662QZxqQZvH2Y.png

我要發表回答

立即登入回答