html - 如何实现附加到此选择元素的所有样式的像素完美对齐？

Question

我有一个 <select>我尝试尽可能多地使用 CSS 设置样式的元素。我已经成功地走了很远，you can see a test example with garish colours for clarity on JSFiddle here .

当页面首次加载时，带有向下箭头的伪按钮与 <select> 的顶部未对齐。元素乘 1 像素(至少在我正在测试的 Chrome 中):

然后，在您单击 <select> 之后元素，顶部对齐，但底部有一个额外的空白像素，在伪按钮下方(是否选择其他选项无关紧要):

如何纠正这些对齐问题，使 <select> 前后的白色和蓝色区域具有像素完美对齐元素被点击了？

我尝试了多种 CSS 来尝试消除焦点和边框。

body {
  background-color: #999;
}
.select {
    position: relative;
    display: block;
    width: 12em;
    height: 3em;
    line-height: 3;
    overflow: hidden;
    border-radius: .25em;
}
select {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 .5em;
    color: blue;
    cursor: pointer;
    border-width: 0;
    border-style: none;
    outline: none;
    outline-style:none;
    box-shadow:none;
    border-color:transparent;
    resize: none;
}
select:focus {
    outline: none;
    outline-style:none;
    box-shadow:none;
    border-color:transparent;
    resize: none;
}
select::-ms-expand {
    display: none;
}
/* Arrow */
.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 1em;
    background: blue;
    pointer-events: none;
}
/* Transition */
.select:hover::after {
    color: red;
}
.select::after {
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}

<div class="select">
  <select id="languageSelector">
    <option>English</option>
    <option>French</option>
    <option>Chinese</option>
    <option>Japanese</option>
    <option>Russian</option>
    <option>Spanish</option>
  </select>
</div>

Answer 1

试一试

从 .select 中删除 line-height 属性并将其粘贴到 .select::after 中

CSS

.select::after{
line-height: 3em;
}

希望对您有所帮助