checkbox css 修改樣式問題

jquery

tenno081 2020-12-07 10:28:19 ‧ 1227 瀏覽

分享至

最近我需要把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 檢舉

抱歉抱歉，忘了儲存，已修改

listennn08 iT邦高手 5 級 ‧ 2020-12-07 11:42:44 檢舉

你可以跟我說一下哪裡有改到大小嗎

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);
但顯示出來是灰壓壓的一片不太好看
所以才想改個顏色

listennn08 iT邦高手 5 級 ‧ 2020-12-07 13:22:03 檢舉

大小真的有欸不過顏色的話可能改不了哦
要用偽元素去改

tenno081 iT邦研究生 4 級 ‧ 2020-12-07 13:25:14 檢舉

https://i.imgur.com/R5QrNSB.jpg

listennn08 iT邦高手 5 級 ‧ 2020-12-07 13:31:04 檢舉

你直接複製上面 codepen 的樣式改成 disabled 就好了啊

tenno081 iT邦研究生 4 級 ‧ 2020-12-07 13:34:46 檢舉

那我能請問有辦法用JS判斷要不要使用這些CSS嗎?

listennn08 iT邦高手 5 級 ‧ 2020-12-07 13:38:18 檢舉

可以啊用 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 }} |

直播中

1 個回答

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 */

效果也不差!