如何设置 HTML 单选输入元素的样式以使单选按钮不存在

Question

我正在应对一项挑战，想知道如何设计无线电输入元素的样式：

• 实际的无线电功能本身并不存在，
• 该元素将在被选择时，其

  background-color

  更改为我选择的颜色，
• 该元素在被选择后无法取消选择（就像一个正确的单选按钮）。

我搜索并发现了这篇 ModernCSS 文章，它没有提供我正在寻找的内容。我应用了我从文章中理解的内容，如下所示：

<label role="radio" class="radio">
    <input type="radio" name="radio">
    5%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    10%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    15%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    25%
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    50%
</label>
<label role="textbox">
    <input type="text" name="amount" value="40%">
</label>

input[type="radio"] {
    display: grid;
    place-content: center;
    appearance: none;
    margin: 10% 0 0;
    width: 2rem;
    height: 1rem;
    align-items: center;
    background-color: #fff;
}

input[type="radio"]:checked {
    background-color: hsl(172, 67%, 45%);
}

.radio {
    grid-template-columns: 1rem auto;
    gap: 0.5rem;
    background-color: hsl(183, 100%, 15%);
}

与我尝试过的许多其他文章一样，例如Bryntum的这篇文章和W3Schools的，它们向您展示了如何设计收音机本身，我不需要，因为我正在尝试完全摆脱它。

Answer 1

我想您实际上并不希望单选按钮消失，但您希望它们不被看到，因为您仍然希望它们具有可点击的品质。

您可以通过将其不透明度设置为 0 来实现此目的。

您还需要的是标签元素会受到其关联输入是否被检查的影响。此代码片段改变了顺序，以便标签在输入之后立即出现，并且新颜色（当选中单选按钮时）被放置在标签上，而不是单选按钮上。

还要注意“for”属性的使用，该属性表示标签与该输入关联（通过 id）。

此代码片段将每个输入/标签对分组到具有类选择的 div 中，并将批次分组到具有类选择的 div 中，以使格式化更容易。

.choices {
  display: flex;
  gap: 10px;
}

input[type="radio"] {
  opacity: 0;
  width: 2rem;
  height: 1em;
  background-color: #fff;
  position: absolute;
}

input[type="radio"]:checked+label {
  background-color: hsl(172, 67%, 45%);
}

.radio {
  background-color: hsl(183, 100%, 15%);
  color: white;
}

<div class="choices">
  <div class="choice">
    <input type="radio" name="radio" id="five">
    <label role="radio" class="radio" for="five">
    5%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="ten">
    <label role="radio" class="radio" for="ten">
    10%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="fifteen">
    <label role="radio" class="radio" for="fifteen">
    15%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="twentyfive">
    <label role="radio" class="radio" for="twentyfive">
    25%
</label>
  </div>
  <div class="choice">
    <input type="radio" name="radio" id="fifty">
    <label role="radio" class="radio" for="fifty">
    50%
</label>
  </div>
  <div class="choice">
    <input type="text" name="amount" value="40%" id="text">
    <label role="textbox" for="text">
</label>
  </div>
</div>

显然，您会想要根据需要设置格式，并且我不清楚您希望输入类型文本时发生什么，因为您给了它一个不同的名称。我会发表评论以获得澄清。

Answer 2

label{
  position: relative;
}
input[type=radio]{
  position:absolute;
  visibility:hidden;
}
input[type=radio]:checked + div{
  background: green;
}

<label role="radio" class="radio">
    <input type="radio" name="radio">
    <div>5%</div>
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    <div>10%</div>
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    <div>15%</div>
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    <div>20%</div>
</label>
<label role="radio" class="radio">
    <input type="radio" name="radio">
    <div>50%</div>
</label>
<label role="textbox">
    <input type="text" name="amount" value="40%">
</label>

你可以继续清理它并按照你想要的方式构建它，这就是我的做法或使用 javascript。

Answer 3

您无法仅使用一个单选组来取消选择单选按钮。我使用多个单选组来使单选按钮在选择后不可选择。 试试这个：

input[type="radio"] {
  appearance: none;
  width:100%;
  height:100%;
  position:absolute;
  z-index:999;
}
label{
  width:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
input[type="radio"]:checked + label {
    background-color: hsl(172, 67%, 45%);
}

div {
  height:200px;
}

<div>
    <input type="radio" name="radio1"/>
    <label role="radio1" class="radio">5%</label>
</div>
<div>
    <input type="radio" name="radio2">
    <label role="radio2" class="radio">10%</label>
</div>
<div>
    <input type="radio" name="radio3">
    <label role="radio3" class="radio">15%</label>
</div>
<div>
    <input type="radio" name="radio4">
    <label role="radio4" class="radio">20%</label>
</div>
<div>
    <input type="radio" name="radio5">
    <label role="radio5" class="radio">25%</label>
</div>
<div>
    <input type="radio" name="radio6">
    <label role="radio6" class="radio">50%</label>
</div>

Answer 4

原始请求可以使用新的

has()

选择器来实现。目前，这在 Chrome 中效果很好，但在 Firefox 上还不清楚......

根据MDN，3天前发布的FF版本已经支持...但我的旧v115.5（ESR）也至少有部分支持。然而，FF，至少我的旧版本，似乎没有对

has()

进行动态查询，因为这个示例仅在浏览器重新加载文档后才有效（并保留之前的选择）。

这是一个具有相同代码的 CodePen...在我的 FF 中，如果我单击其中一个标签，然后对代码进行更改（只需添加一个空格或其他内容以强制重新运行），页面就会刷新正确的标签突出显示。

无论如何，有一个重要的警告，就是这样。关键点就在

label:has(input[type=radio]:checked)

位。

label {
  padding: 4px;
}
label:has(input[type=radio]) {
  display: grid;
  flex-direction: row;
  align-items: center;
  background: red;
}
label:has(input[type=radio]:checked) {
  background: green;
}

input[type=radio] {
  position:absolute;
  visibility: hidden;
}

<label role="radio" class="radio">
  <input type="radio" name="radio">
  5%
</label>
<label role="radio" class="radio">
  <input type="radio" name="radio">
  10%
</label>
<label role="radio" class="radio">
  <input type="radio" name="radio">
  15%
</label>
<label role="radio" class="radio">
  <input type="radio" name="radio">
  25%
</label>
<label role="radio" class="radio">
  <input type="radio" name="radio">
  50%
</label>
<label role="textbox">
  <input type="text" name="amount" value="40%">
</label>