如何使用文本选择和数字输入等箭头行为进行语义输入

Question

我希望通过选择低/中/高进行这样的输入，并使箭头控件类似于input[type=number]。对此进行编码的语义方式是什么？

Answer 1

如果你想要语义和可访问;但也要保持这种设计;
您最好的选择是使用input[type=radio]和label[for]。

您必须使用:checked伪属性和~相邻选择器。

这是一个工作片段，我没有花时间在设计上。

＆＃13;

＆＃13;

.almost-select {
  display: inline-block;
  background: #EEE;
  border: #CCC solid;
  border-radius: .2rem;
}
.almost-select input,
.almost-select output{
  display: none;
}
.almost-select .buttons {
  display: inline-block;
  border-left: inherit;
}
.almost-select label {
  font-size: .5em;
}

.almost-select #temp_high:checked ~ output[for='temp_high'] {
  display: inline-block;
}
.almost-select #temp_low:checked ~ output[for='temp_low'] {
  display: inline-block;
}

＆＃13;

    <div class='almost-select'>
      <input type='radio' name='temp' id='temp_high' checked />
      <input type='radio' name='temp' id='temp_low' />
      <output for='temp_high'>High</output>
      <output for='temp_low'>Low</output>
      <div class='buttons'>
        <label for='temp_high'>▲</label>
        <label for='temp_low'>▼</label>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

但是你有多少选择？ 如果你有一个选择有很多选项，它将导致一个非常大的CSS ......