HTML-选择焦点高亮边框上的框

Question

我正在尝试突出显示选择框/ div的边框,当该框用于选择项目时

这是hTML方面的代码

  <div class="styled-1">                   
      <select>
          <option value="1">OPTION - 1</option>
          <option value="2">OPTION -2 </option>
          <option value="3">OPTION - 3</option>
      </select>
  </div>

这是CSS

.styled-1 select {
    width: 312px;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    border: none;
    left: 50px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 50px;
    box-shadow: 0 0 3pt 2pt #8F4A11;
    outline: none !important;
}

pout在上面为".styled-1"定义下面类型的CSS的方式是什么？

textarea:focus {
    outline: none !important;
    box-shadow: 0 0 3pt 2pt #719ECE;
}

我尝试了以下但没有运气

.styled-1:focus {
        outline: none !important;
        box-shadow: 0 0 3pt 2pt #719ECE;
    }

Answer 1

:focus适用于select元素; 所以,您可以select像这样设置元素的样式:

.styled-1 select:focus {
    box-shadow: 0 0 3pt 2pt #719ECE;    
}

这是一个显示结果的JSfiddle:http://jsfiddle.net/n83p5qz7/