为何select与input标签文本对齐不同？如何消除select左侧额外间距？

问题：select标签与input标签宽度相同，且均设置了text-align: left，但select内部文本左侧存在额外间距，导致和input内的文本无法对齐（表现为select内文本明显偏右，input内文本紧贴左侧边框）。

相关代码片段：

CSS代码 #

.select, .input {
  width: 45%;
  text-align: left;
  height: 1.5rem;
  background-color: transparent;
  display: block;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: mediumslateblue;
  padding: 0;
  margin-bottom: 12px;
  margin-left: 10%;
}

HTML代码 #

<input type="text" class="input" value="Hello" />
<select name="" id="" class="select">
  <option value="">Hello</option>
</select>

解决方案 #

造成该问题的核心是不同浏览器对select控件存在默认内边距或内置样式，即便设置padding: 0也可能不生效。可通过以下几种方法解决：

• 方法一：重置外观并清除内边距
  给.select类添加以下样式，彻底重置浏览器对select的默认样式，同时可自定义下拉箭头：

  .select {
    padding-left: 0;
    /* 移除浏览器默认的select外观 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 自定义下拉箭头示例 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
    padding-right: 1rem; /* 给箭头留出空间 */
  }
  

• 方法二：微调文本缩进
  若不想修改select默认外观，可通过text-indent抵消左侧默认间距，数值根据实际显示调整：

  .select {
    text-indent: -2px;
  }
  

• 方法三：使用负值内边距
  部分浏览器中select左侧默认内边距无法通过padding-left:0清除，可尝试设置负值内边距：

  .select {
    padding-left: -3px;
  }
  

内容的提问来源于stack exchange，提问作者JackFrost