javascript - Bootstrap Multiselect Onfocus不起作用

当我专注于引导多重选择时，我正在尝试更改图标颜色。但是onfocus不适用于多选。这是HTML代码：

<div class="col-sm-7" id="hearDiv">
 <div class="form-group">
  <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-users" id="heari"></i>
   </span>
   <select class="form-control" name="hear[]"
    id="hear" onfocusin="icon(this.id)" onfocusout="iconout(this.id)"
    multiple>
    <option value="Google Search">Google Search</option>
    <option value="Social Media (Facebook, Instagram etc.)">Social Media
     (Facebook, Instagram etc.)</option>
    <option value="From a Friend">From a Friend</option>
   </select>
  </div>
 </div>
</div>

这是JavaScript：

function icon(id){
    document.getElementById(id+"i").style.color = ("#ff3333");
}
function iconout(id){
    document.getElementById(id+"i").style.color = ("#595959");
}

最佳答案

尝试这种方式：

function icon(id) {
  id.style.color = ("#ff3333");
}

function iconout(id) {
  id.style.color = ("#595959");
}

<div class="col-sm-7" id="hearDiv">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-users" id="heari"></i></span>
      <select class="form-control" name="hear[]" id="hear" onfocus="icon(this)" onfocusout="iconout(this)" multiple>
    <option value="Google Search">Google Search</option>
    <option value="Social Media (Facebook, Instagram etc.)">Social Media
     (Facebook, Instagram etc.)</option>
    <option value="From a Friend">From a Friend</option>
   </select>
    </div>
  </div>
</div>