html - 仅使用 CSS 的自定义选择元素

Question

我正在尝试仅使用 CSS 自定义一个选择元素，发现了这个:

<div class="cs_div">
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>

CSS:

.cs_div {
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fafafa url("../images/select.png") no-repeat;
  width: 190px;
}
.cs_div select {
  margin: 0;
  padding: 5px 8px;
  width: 215px;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cs_div select:focus {
  outline: none;
}

效果很好，但是网站主样式表上的某些内容在 div 底部添加了一个“空格”，在 chrome 中，在 firefox 中不会发生这种情况。

Chrome :

火狐:

已经尝试过 padding-bottom: 0; margin-bottom: 0; 但不起作用...

这是一个带有自定义选择元素的测试站点:http://eliterosa.bl.ee/activity/

Answer 1

您的问题有点含糊，但您可能指的是现在内联 block div 的垂直对齐方式。你只需要使用 vertical-align: middle;到 div#activity-filter-by-outer...

#activity-filter-by-outer { display: inline-block; vertical-align: middle; }

现在您已将 div 设为内联 block ，它占用的行高与其他内联元素非常相似。

查看屏幕截图: