html - 如何通过文本选择和箭头行为(例如数字输入)进行语义输入

我正在寻找这样的输入，可以选择低/中/高，并且有类似于input[type=number]的箭头控件。什么是语义编码方法？

最佳答案

如果你想有语义和可访问性，也要保持这种设计；
您的最佳选择是使用input[type=radio]和label[for]。
必须使用:checked伪属性和~相邻选择器。
这是一个工作片段，我没有花时间在设计上。

.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;
}

    <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>

但你有多少选择？
如果你有一个选择与许多选项，它将导致一个真正大的css…

关于html - 如何通过文本选择和箭头行为(例如数字输入)进行语义输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33767666/