没有 div 的 Wordpress Contact Form 7 复选框的 CSS答案

【问题标题】：CSS for Wordpress Contact Form 7 checkbox without divs没有 div 的 Wordpress Contact Form 7 复选框的 CSS
【发布时间】：2023-04-08 07:38:01
【问题描述】：

我搜索了论坛和谷歌，这个特定的问题似乎很容易解决，但我找不到答案。我想在不使用 div 的情况下对 Contact Form 7 的复选框进行样式化。但我要使用的样式是使用 div 的样式。例如，我想在这个例子中使用 SQUARE ONE 的样式：http://codepen.io/bbodine1/pen/novBm

由于我在上面提供的示例使用了 div（我不介意），因此 Contact Form 7 似乎不起作用，因为它需要多个 div 才能包含表单字段。这是我要格式化的代码：

<p>What are you interested in? Select all that apply. (required)<br />
[checkbox* service-interested "Item 1" "Item 2" "Item 3" "Item 4" "Item 5" "Other"] </p>

这是帮助风格化http://contactform7.com/styling-contact-form/的原始帖子

【问题讨论】：

为什么不在复选框中添加一个类并设置样式？
您可能没有意识到，对于大多数浏览器，没有办法通过纯 css 重新设置复选框和单选按钮的样式。因此，每当您找到显示精美图形而不是标准复选框/单选按钮的解决方案时，它总是被构建为这些元素的视觉替代品。这总是涉及额外的标记（主要是 div），并且在大多数情况下还需要 Javascript 来模仿正确的行为，包括能够访问键盘导航中的元素。
啊所以基本上没有办法。 :( @Howli 我特别想要显示示例中的效果，唯一的方法是通过 div。由于我无法分解联系表单（其行为不同于简单的 html 表单）我无法去做吧。

标签： html css wordpress customization contact-form

【解决方案1】：

请检查您的以下代码笔叉。

http://codepen.io/Yeswanth-JG/pen/bNWyVd

<span class="slideone">
"..."
</span>

CSS

.slideone {
        显示：块；
     }

对于默认情况下为块的标签以外的标签，您应该将显示属性设置为“阻止”...

所以，对于第一张幻灯片...我已经给出了 span 和给出的 display 作为块，'It Works!'..

注意：您也可以将显示作为内联块，但要小心...ll

【讨论】：