html - 为选择提供与输入相同的轮廓样式

Question

我的要求是选择元素具有锐利的边缘，就像我在代码中对标记和 CSS 所做的那样。

问题是我希望选择在获得焦点时具有与输入相同的样式。

输入有边框和轮廓。

我可以通过选择获得相同的效果，但当它们具有焦点时边框会变圆，因为我不能使用轮廓两次。

有办法解决这个问题吗？

div {
  margin: 10px 0;
}

input[type="text"] {
  border: 1px solid #727272;
}

input[type="text"]:focus {
  border: 2px solid #0065bd;
  outline: 3px solid #ffbf47;
  outline-offset: 0;
}

select {
  outline: 1px solid #727272;
}

select:focus {
  border: 2px solid #0065bd;
  outline: 3px solid #ffbf47;
  outline-offset: 0;
}

<div>
  <input type="text" />
</div>
<div>
  <select>
    <option>One</option>
    <option>Two</option>
  </select>
</div>

Answer 1

试试这个:

select {     
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}