如果选中,则更改复选框的颜色

时间:2016-08-31 15:45:10

标签: html css css3 checkbox input

我正在尝试更改复选框的背景颜色和边框,但它无效。

HTML:

PreferenceManager.getDefaultSharedPreferences(context).getString(MY_PREFERENCE, null);

CSS:

<label for="checkbox1" class="checkbox">
  <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox</span>
</label>

JSFiddle Demo

更新

我无法更改标记

2 个答案:

答案 0 :(得分:2)

您必须将复选框包装在一个范围内才能执行此操作。 找到Fiddle with Ex.

<span class="bigcheck">
    <label class="bigcheck">Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes"/>
        <span class="bigcheck-target"></span>
    </label>
</span>

希望有所帮助:)

答案 1 :(得分:2)

使用以下选项

input[type="checkbox"]#checkbox1:checked + span {
      border-color: red;
    background-color:red;
}