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/