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

I'm looking to make inputs like this with choices low/medium/high and have arrow controls similar to input[type=number]. What's a semantic way to code this?

我正在寻找这样的输入,选择低/中/高,并且箭头控制类似于输入[type = number]。对此进行编码的语义方式是什么?

1 个解决方案

#1

If you want to be semantic and accessible; But also keep this design;
Your best choice is to use input[type=radio] and label[for].

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

You'll have to use :checked pseudo-attribute and ~ adjacent selectors.

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

Here is a working snippet, I didn't spent time on design.

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

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

But how many options do you have ?
If you have a select with many many options, it will result in a really big CSS...

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

#1