相关疑难解决方法(0)

我正在尝试使用以下方式设置复选框的样式:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但风格并未适用.该复选框仍显示其默认样式.我如何给它指定的样式？

如何设置firefox中的复选框样式,并使复选标记和边框消失？

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
}

HTML:

<form id="conditions-form">
    <ul>
        <li>
            <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
            <label class="checkbox" for="condition3">Conditions 3</label>
        </li>
    </ul>
</form>

我想在每张图片的右下角显示一个复选框供选择.

我该怎么做这样的事情？

请记住,点击图片有一个独特的事件(我将设法做!),但点击该复选框应选择/取消选择那个？

我想自定义浏览器复选框。当状态被选中时，应该显示 图标，checked.svg而不是复选框和图标unchecked.svg。

这是我的代码。HTML：

<div class="checkbox-custom">
   <input type="checkbox"/>
      <div class="checkmark">
          <img src="@/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
          <img src="@/assets/images/icons/checkbox/checked.svg" class="checked"/>
    </div>
</div>

SAS：

.checkbox-custom {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 0;
    top: 0;

    // Hide default browser checkbox
    input[type=checkbox] {
                display: none;
            }

   input[type=checkbox] + .checkmark {
        position: absolute;
        left: 3.5px;
        top: 3.5px;
        right: 3.5px;
        bottom: 3.5px;

        display: inline-block;
        cursor: pointer;

        img {
            width: 21px;
            height: 21px;
        }

        .checked {
            display: none;
        }
    }    

    input[type=checkbox]:checked + .checkmark {
        .checked …