html - 四态复选框

Question

我可以有一个带有indeterminate 的三态复选框，但我需要轮换 4 个状态。那么我怎样才能让东西看起来像四状态复选框呢？我唯一的选择是创建一组看起来像带有各种图标的复选框的图像，还是有更优雅的方法？

Answer 1

您可以使用单选按钮和一些 CSS (CSS3) 实现类似的效果(循环状态)，而无需 JavaScript:

.cyclestate {
 display: inline-grid;
}
.cyclestate label {
 grid-area: 1 / 1;
 background-color: white; 
 color: black;
 z-index: 0;
 opacity: 0;
}
.cyclestate input {
 position: absolute;
 z-index: -1;
}
.cyclestate input:checked + label {
 opacity: 1;
}
.cyclestate input:first-of-type + label {
 z-index: 2;
}
.cyclestate input:checked + label + input + label {
 opacity: 0;
 z-index: 2;
}
/* -- Unrelated and accessibility -- */
.cyclestate { border: none; padding: 0; }
.cyclestate legend { position: absolute; }
.cyclestate label { padding: 1em; text-align: center; display: inline-block; cursor: pointer; user-select: none;
}
.cyclestate label::before { content: '← '; }
.cyclestate label::after { content: ' →'; }
.cyclestate label::before, label::after { color: transparent; }
.cyclestate input:focus-visible + label { outline: solid; }
.cyclestate input:focus-visible + label::before,
.cyclestate input:focus-visible + label::after { color: currentcolor; }
:root { background: dimgray; color: snow; }
:link { color: aqua; } :visited { color: lime; }

<fieldset class="cyclestate" id="x">
  <legend>Pick a number</legend>
  <input id="one" type="radio" name="r" checked>
  <label for="one">One</label>
  <input id="two" type="radio" name="r">
  <label for="two">Two</label>
  <input id="three" type="radio" name="r">
  <label for="three">Two Plus One</label>
  <input id="four" type="radio" name="r">
  <label for="four">Four</label>
</fieldset>

<p><button onclick="x.classList.toggle('cyclestate')">Toggle condenseness ↑</button>

基本上，这种方法将标签相互叠加(利用相当现代的 CSS 技术(网格))，并使 NEXT 未检查输入的标签透明并提升到所有其他标签之上。实际上，可见的是已选中输入的标签，但点击/点击事件由该透明同级覆盖层捕获。这保留了语义和可访问性。

(注意:尚未使用屏幕阅读器或旧版浏览器进行全面测试。)

---

原始的 2015 年片段具有非常可疑的可访问性，谨慎使用(或者最好根本不要使用):

.cyclestate input:not(b),
.cyclestate input:not(b) + label {
  display: none;
}
.cyclestate input:checked + label {
  display: inline-block;
  width: 4em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-appearance: button;
  -moz-appearance: button;
}

<span class="cyclestate">
  <input type="radio" name="foo" value="one" id="one" checked>
  <label for="two">one</label>
  <input type="radio" name="foo" value="two" id="two">
  <label for="three">two</label>
  <input type="radio" name="foo" value="three" id="three">
  <label for="four">three</label>
  <input type="radio" name="foo" value="four" id="four">
  <label for="one">four</label>
</span>

有了它，您将在一个地方拥有多个状态的节省空间的视觉表示，并在服务器端获得可读值。

请注意，这样使用标签是一种利用:标签针对的输入与其描述的不同。