jQuery的移動更改複選框顏色爲白

我正在使用jQuery的移動，我只是想設置一個未經檢查的複選框的背景爲白色。我試圖與美樂家這樣做，但找不到選項。另外玩CSS也沒有解決問題。那麼什麼是正確的CSS類來做到這一點？爲了清楚說明覆選框本身應該是白色而不是標籤。jQuery的移動更改複選框顏色爲白

來源

2014-03-31 user3480316

發表您試圖 –

你的問題不明確。 – Omar

Why can't you use custom checkbox.. 
<!DOCTYPE html> 

<html> 
    <head>   
    <style> 
     .checkbox { 
      display: inline-block !important; 
      cursor: pointer; 
      font-size: 25px !important; 
      margin: 0px !important;    
     } 
     input[type=checkbox] { 
      display: none; 
     } 
     .checkbox:before { 
      content: ""; 
      display: inline-block; 
      width: 25px; 
      height: 25px; 
      vertical-align: middle; 
      background-color: white; 
      color: black; 
      text-align: center; 
      box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
      border-radius: 3px; 
     } 
     input[type=checkbox]:checked + .checkbox:before { 
      content: "\2713"; 
      background-color: #0088cc; 
      text-shadow: 1px 1px 1px black; 
      font-size: 22px; 
     } 
    </style> 
</head> 
    <body> 
    <input data-role="none" id="Option" type="checkbox"/> 
    <label data-role="none" class="checkbox" for="Option"> Alerts </label>  
    </body> 
</html>

來源

2014-03-31 09:02:32

這就是我想要的。複選框本身應該是白色的，而不是周圍的標籤。我總是嘗試使用預定義的組件，而不是自定義的組件，但如果這是不可能的，我會嘗試使用它。 – user3480316

背景被添加到label一個div ui-checkbox包裝複選框本身。

您需要覆蓋label的背景等級ui-checkbox-off。使用!important強制覆蓋。

/* un-checked */ 
.ui-checkbox label.ui-checkbox-off { 
    background: white !important; 
} 

/* checked */ 
.ui-checkbox label.ui-checkbox-on { 
    background: #00b0eb !important; 
}

要更改複選框本身的顏色，使用:after僞選擇覆蓋background-color不background。

.ui-checkbox-off:after { 
    background-color: white !important; 
} 

.ui-checkbox-on:after { 
    background-color: #00b0eb !important; 
}

Demo

來源

2014-03-31 08:54:32 Omar

一如既往的乾淨整潔。我慢了;） – tronc

@tronc感謝夥計:) – Omar

jQuery的移動更改複選框顏色爲白

回答

相關問題