Question

我正在使用jquery mobile，我只想将未选中复选框的背景设置为白色。我试图用themeroller做到这一点，但无法找到选项。另外玩css也没有解决问题。那么正确的css课程是做什么的呢？为了清楚起见，复选框本身应该是白色而不是sorrunding标签。

Answer 1

背景已添加到div label包装复选框本身内的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

Answer 2

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>

jquery移动更改复选框颜色为白色

2 个答案: