Question

编辑：原始答案不适用于移动设备。转到here中寻求解决方案。

我已经知道如何通过使用CSS来使<input type="radio">的{{1}}看起来像任何特定浏览器默认<label>的按钮，直到看起来与{{1 }}我正在尝试复制。但是，只要有人从具有不同默认值<button>的浏览器中查看它，它就会显得不合适。（即使我可以为每个浏览器复制每个默认的<button>，明天也可能会发明一个新的浏览器。）

因此，我想使用一个实际的按钮来获取适合浏览器的默认样式。

到目前为止的代码重现：

<button>

稍后，我将<button>更改为<h1>Choose A or B</h1> <label><button type="button"><input type="radio" name="choice" value="A">A</button></label> <label><button type="button"><input type="radio" name="choice" value="B">B</button></label>，并使用其他样式显示是否已选中，但出于诊断原因，我暂时将其保留。

运行该代码段时，您会注意到单击<input type="radio" name="choice" value="A">可以按预期进行，但是单击<input type="radio" name="choice" value="A" hidden>本身却无济于事。

这是另一次失败的尝试：

<input type="radio">

我什至尝试添加<button>属性。没有按预期工作。我应该手动放弃<h1>Choose A or B</h1> <input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label> <input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>并设置其样式，还是仍然可以访问disabled的默认外观？

（是的，我已经知道我可以使用JavaScript来模拟<label>在<button>上的行为，但是我将在整个网站的许多组中有很多按钮。所以我如果要简化网站维护，只需手动设置<input type="radio">的样式即可。同样，仅针对此问题安装整个库也是如此。）

Answer 1

一个想法是将pointer-events:none;添加到按钮上，但是您将没有:focus，:active和:hover状态的样式。

button {
  pointer-events:none;
}

<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>

但是，您可以使用以下方式添加自己的自定义:focus :active :hover和:checked状态：

input[type="radio"]:focus + label button{
    /*add checked style here*/
label:hover > button {
    /*add hover style here*/
}
label:active > button {
    /*add active style here*/
}
input[type="radio"]:checked + label button{
    /*add checked style here*/

Answer 2

它无法正常工作，就像您正在做的那样。您需要这样做。

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    z-index: -1;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 94px;
    height: 24px;
    background: #F87DA9;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: -1;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

<form action="#">
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">Apple</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">Peach</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
  </p>
</form>

您可以使用CSS :before和:after伪类来执行此操作，而无需使用任何按钮。您可以根据需要修改以上示例。

代码是从https://codepen.io/manabox/pen/raQmpL复制而来的，在上面的示例中进行了修改。

我试图将<button>放在<input type =“ radio”>的<label>

2 个答案: