4

可能重复：
“输入”元素之前的 CSS 内容生成

我正在尝试仅使用 css 进行自定义复选框。这适用于基于 webkit 的浏览器（chrome、safari），但不适用于其他浏览器。

input[type=checkbox]:before {
  content:'';
  display:inline-block;
  width:24px;
  height:24px;
  margin-top:-8px;
  margin-left:-12px;
  background: url('../img/icons/checkbox_unchecked.png') left center no-repeat;
  border: 1px solid gray;
}
input[type=checkbox]:checked:before {
  background: url('../img/icons/checkbox_checked.png') left center no-repeat;
}​

为什么这只适用于基于 webkit 的浏览器？ http://jsfiddle.net/jdB4a/这里是jsfiddle，我只是把图片改成背景色，效果还是一样的。

4

1 回答 1

1

很抱歉，您无法使用 -webkit- 以外的任何浏览器实现此目的。最好的方法是在其中放置一个带有标签的跨度并将样式放置在其上并放置 opacity: 0; 在复选框上。听起来比它更复杂。无论如何，这里有一个演示链接，它解释了如何实现 css3 多浏览器自定义复选框，希望对您有所帮助。

http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html

于 2012-11-28T10:10:58.190 回答