Question

我想用CSS复制我的复选框。说实话，我有一张图片，我想把我的复选框放进去。但在我使用visibility: hidden或display_none后，我无法替换任何内容。你能帮帮我吗？

这是我的HTML：

<div class="contact_dane">

          <input type="checkbox" id="contact_data" checked>
          <label for="contact_data">
            <span>
              Lorem ipsum lorem ipsum lorem ipsum
            </span>
          </label>

            </div>

这是我的CSS：

.contact_dane input[type="checkbox"] {
  visibility: hidden;
}

.contact_data input[type="checkbox"] + label span {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("ok.jpg") left top no-repeat;
}

//编辑：抱歉，我试图简化我的问题，我忘了更改css类名，现在没关系。

Answer 1

查看已检查的属性

 <input type="checkbox" id="contact_data" checked>

它应该是：

<input type="checkbox" id="contact_data" checked="expression">

Answer 2

使用display: none;复选框。另外，我建议将input与span label包裹在<div class="contact_dane"> <label for="contact_data"> <input type="checkbox" id="contact_data" checked> <span> Lorem ipsum lorem ipsum lorem ipsum </span> </label> </div>中，如下所示：

.contact_dane input[type="checkbox"] {
  display: none;
}

.contact_dane label span:before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  background: url("ok.jpg") left top no-repeat;
}

和CSS：

data.children.0

JSFiddle here

Answer 3

您无法使用背景图片执行此操作。试试这个例子，只用css来设置它的样式：

隐藏可见性后，我无法更改复选框

3 个答案: