Question

我有一个我想用图像替换的复选框。我能够成功地使图像与复选框重叠。问题是图像具有透明背景，因此导致用户仍然看到复选框。有什么办法可以让我在保持图像背景的同时隐藏实际的复选框。

CSS

input[type=checkbox]:before { 
  content:""; 
  display:inline-block; 
  width:12px; 
  height:12px; 
  background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'); 
  background-size: 12px; 
}

HTML

<input type="checkbox" id="chk1" />

小提琴here。

Answer 1

更正.....

我添加了background-color: #fff !important;来制作“按钮框”。隐形或白色，无论哪种方式都取代了按钮框显示。（不知道为什么，但是如果你不添加content: "";它不起作用：/）

在顶部创建带背景的透明复选框

1 个答案: