如何实现单选按钮的按钮插入

Question

我正在尝试制作一个带有问题的网络表单，该问题将由用户回答。 这些选项为是和否。 首先，我有单选按钮，但是它们似乎很旧，因此我尝试在输入字段中将按钮实现为一种类型。 问题是当我从一个问题中选择和选项时，我无法从另一个问题中选择其他选项

是否有另一种方法可以实现这一目标。 就像在javascript中一样。 这样，一旦用户选择了这些选项，我就可以将该值发送到我的PHP文件中。

我的html代码：

  <form action="" method="post">
           <label>XYZ QUESTION?</label>
            <input type="button" name="opt" value="YES">
            <input type="button" name="opt" value="NO">

            <label>XYZ QUESTION</label>
            <input type="button" name="opt1" value="YES">
            <input type="button" name="opt1" value="NO">

            <label>XYZ QUESTION?</label>
            <input type="button" name="opt2" value="YES">
            <input type="button" name="opt2" value="NO">
</form>

Answer 1

这绝对是丑陋的:)，但它提供了一个示例（如何使用CSS来创建单选按钮外观的示例）。 而不接受浏览器的默认显示。

这里最大的“技巧”是可以单击输入的标签来触发输入元素的动作。 要创建此链接，请确保将<label for="">设置为input（无线电）元素的唯一ID 。

CSS中的+查找与规则匹配的相邻元素。 仅通过在标签上使用类名就可以实现相同的目的。

:after是CSS伪元素-如今已经得到很好的支持（ https://caniuse.com/#feat=css-gencontent ）

就像我说的，这是一个例子。 在网络上搜索“ CSS样式单选按钮”之类的内容将带来大量其他示例。

 input[type="radio"]{ display: none; } input[type="radio"]+label{ cursor: pointer; padding-right: 20px; } input[type="radio"]+label:after{ content: ' '; display: inline-block; height: 20px; width: 20px; border: solid 3px green; border-radius: 20px; } input[type="radio"]:checked+label:after{ background-color: orange; } 

 <input id="radioYes" type="radio" name="test" value="yes" class="yes" /><label for="radioYes"> YES </label> <input id="radioNo" type="radio" name="test" value="no" class="no" /><label for="radioNo"> NO </label>