css表单复选框样式与选中和之后的标签 [英] css form checkbox styling with checked and after tags

问题描述

我想设计一个表单而不使用JavaScript或JQuery。它包括一系列复选框。想法是在复选框之后显示一个特定的gif，如果它未被选中。否则，不显示任何内容。这是我有的代码：

I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have:

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

它适用于Chrome，但似乎无法在Firefox或IE 。什么是错的？

It works in Chrome but doesn't seem to be working in Firefox or IE. What is wrong?

推荐答案

为我工作的跨浏览器解决方案是包括一个空标签（类checkbox_label ）后的复选框输入，然后样式IT而不是复选框。

The cross-browser solution that worked for me was to include an empty label (with class "checkbox_label") after the checkbox input and then style IT rather than the checkbox.

input[type=checkbox] + label:after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:0px;
  top:1px;
  z-index:100;
}

input[type=checkbox]:checked + label:after
{
  content:"";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}

这篇关于css表单复选框样式与选中和之后的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！