如何实现与此选择元素相关的所有样式的像素完美对齐？

Question

我有一个<select>元素，我试图设置样式，就像我只能使用CSS一样。我设法把它拿得很远，you can see a test example with garish colours for clarity on JSFiddle here。

首次加载页面时，带有向下箭头的伪按钮与<select>元素的顶部错位1个像素（至少在我测试的Chrome中）：

然后，在您单击<select>元素后，顶部对齐，但在底部，伪按钮下方还有一个额外的白色空间像素（如果您选择其他选项则无关紧要或不）：

如何更正这些对齐问题，以便在点击<select>元素之前和之后，白色和蓝色区域的像素完美对齐？

我尝试了各种CSS来尝试杀死焦点和边框。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试一试

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

中

CSS

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

希望这有助于

Answer 2

而不是在line-height类上设置.select而不是在伪元素本身上设置它。

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

body {
  background-color: red;
}

.select {
    position: relative;
    display: block;
    width: 12em;
    height: 3em;
    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;
    line-height: 3em;
    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 3

这是由于浏览器如何计算height: 100%;（基于line-height）。您可以通过指定高度（以像素为单位）来实现像素完美。

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: 50px;
    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>