选择相同的轮廓样式作为输入

Question

我的要求是选择元素具有锐利边缘，就像我在代码中使用标记和css一样。

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

输入有边框和轮廓。

我可以使用select获得相同的效果，但是当它们有焦点时边框会被舍入，因为我不能使用两次轮廓。

有没有办法解决这个问题？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

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

Answer 2

Fwiw，未在版本62.0.3202.62（官方版本）（64位）中进行四舍五入。