带有选中和后标记的CSS表单复选框样式[重复]

Posted 2023-03-05

【中文标题】带有选中和后标记的CSS表单复选框样式[重复]

【英文标题】：css form checkbox styling with checked and after tags [duplicate]

【发布时间】：2013-05-02 00:33:22

【问题描述】：

我正在尝试在不使用 javascript 或 JQuery 的情况下设计表单。它包括一系列复选框。这个想法是如果未选中复选框，则在复选框之后显示某个 gif。否则，在它之后不显示任何内容。这是我的代码：

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。怎么了？

【问题讨论】：

input 是一个内容模型为空的元素——由于 ::after 伪元素被渲染为它们所应用元素的子节点，因此存在冲突。有些浏览器无论如何都允许这样做——有些则不允许。改用相邻的兄弟组合器来格式化您放在输入元素之后的元素。 w3.org/TR/2011/REC-css3-selectors-20110929/…

谢谢，这就解释了。但我仍然无法让它工作。例如，如果我在复选框后放置“p”标签，则以下 CSS 选择器不起作用： input[type=checkbox]:checked + p:after

【参考方案1】：

对我有用的跨浏览器解决方案是在复选框输入之后包含一个空标签（类“checkbox_label”），然后设置 IT 样式而不是复选框。

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;

【讨论】：

嘿，谢谢你的回答，你能提供一些参考或者什么叫 + 运算符...？在这个..上下文中

element1+element2 selector 选择紧跟在 element1 之后的 element2。

【参考方案2】：

显然，规范不支持使用 ::before 和 ::after 伪元素。您的问题已回答here。希望对您有所帮助！

【讨论】：

我在 Firefox 20 和 IE10 中进行测试，这就是为什么我认为我做错了什么......但是什么？

我在 jsfiddle 上用 firefox 试了一下，可以重现你的错误。让我看看能不能找到解决办法。

我想我找到了问题所在。我已将其编辑到我的答案中。

不幸的是，将“输入”包装在“跨度”标签中也不起作用。该死，我想我得继续尝试不同的东西......

嗯...将输入包装在 span 标签中对我有用。您确定将 ::after 样式应用于 span 标签而不是 input 标签吗？