Question

我正在使用图片的复选框;它在Chrome中工作正常，但在Firefox中没有，所以我尝试了很多次来解决这个问题但我还没找到它。

我在mailpoet时事通讯插件中使用此复选框并与我的style.css

连接

Html代码

<p class="wysija-checkbox-paragraph"><label><input class="wysija-checkbox validate[required]" name="wysija[user_list][list_id][]" type="checkbox" value="3" checked="checked" /> Monthly Printed</label>

</p>

<p>  <label class="wysija-checkbox-label"><input class="wysija-checkbox " type="checkbox" name="wysija[field][cf_2]" value="1" />Anboli Daily Email Edition</label></p>

style.css

.checkbox   /*before checked the check box*/
{

    display: inline-block;
    width: 35px;
    height: 35px;
    margin: -10px 5px 0 0;
    vertical-align: middle;
    background: url (http://example.com/uploads/2014/04/chk.jpg) left -35px no-repeat;
    cursor: pointer;
}
.checkbox:checked /*after checked*/
{
    background: url(http://example.com/uploads/2014/04/chk.jpg) left 0px no-repeat;
}

帮我解决这个问题。

Answer 1

我在下面制作了一个通用样本，使用了与你几乎相同的结构。我做的是我把标签放在复选框后面，并通过给它的宽度和高度为0来隐藏复选框。然后我使用css'+'选择器直接在选中复选框后选择标签并更改背景那个标签。当然，标签现在将作为一个复选框，因为点击标签仍会检查隐藏的复选框！

HTML：

<input type="checkbox" name="checkbox" id="check1"/>
<label for="check1"></label>

CSS：

/*before check*/
label{
    display: inline-block;
    margin: -10px 5px 0 0;
    width: 35px;
    height: 35px;
    background: url (http://example.com/uploads/2014/04/chk.jpg) left -35px no-repeat;
    cursor: pointer;
}

/*after check*/
input[type=checkbox]:checked + label{
    background: url(http://example.com/uploads/2014/04/chk.jpg) left 0px no-repeat;
}

/*hide the checkbox*/
input[type=checkbox]{
  height: 0em;
  width: 0em;
  background: none;
}

我使用复选框作为图像chk.jpg它在谷歌浏览器中正常工作但在Mozilla Firefox中无法正常工作？

1 个答案: