点击label标签文字唤起对应颜色下拉选择框的实现问题

修复方案 #

当前无法点击label唤起下拉框的原因是label标签没有和对应的select控件建立关联，只需给label添加for属性，属性值与下拉框的id完全一致即可实现需求，不需要修改原有布局结构。

修正后代码（仅需调整标注的可编辑区域） #

<div class="form-group row">
  <label class="col col-form-label col-4" for="colors">Color</label>
  <div class="col col-4">
    <select name="colors" id="colors" class="form-control">
      <option selected>Select...</option>
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
    </select>
  </div>
</div>

可选优化 #

如果需要实现选择颜色后自动切换背景，无需点击Go按钮，可以给select添加onchange事件：

<select name="colors" id="colors" class="form-control" onchange="changeColor()">

内容的提问来源于stack exchange，提问作者Jonathan Mporampora