同一行内input与select垂直位置不一致的跨浏览器问题求助

问题现象 #

基于浮动标签组件修改后，将input与select置于同一行时，Chrome 114.0.5735.199和Edge 114.0.1823.67中两者垂直基线位置不一致，Firefox 115.0显示正常。尝试使用vertical-position: bottom无效。

解决方案 #

问题根源在于Chrome/Edge对input和select的默认样式、盒模型处理存在差异，可通过以下CSS调整修复：

1. 统一盒模型与垂直对齐
   给input和select显式设置box-sizing: border-box和vertical-align: baseline，确保两者的尺寸计算和对齐规则一致：

   .form-group input,
   .form-group select {
     background-color: transparent;
     border: none;
     border-bottom: 1px solid var(--input-color);
     color: var(--second-color);
     font-size: 16px;
     padding: 10px 0;
     display: block;
     width: 100%;
     box-sizing: border-box; /* 统一盒模型计算 */
     vertical-align: baseline; /* 强制基线对齐 */
   }
   

2. 清除Select默认样式干扰
   Chrome/Edge会给select添加默认的外观样式和内边距，通过appearance属性清除：

   .form-group select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* 如需保留下拉箭头，可添加自定义背景图实现，例如：
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239e9e9e"><path d="M7 10l5 5 5-5z"/></svg>');
     background-position: right 8px center;
     background-repeat: no-repeat;
     padding-right: 30px;
     */
   }
   

3. 补充Select的浮动标签样式
   原代码未处理select的标签浮动逻辑，补充后让组件行为与input一致：

   .form-group select:valid+label,
   .form-group select:focus+label {
     color: var(--main-color);
     font-size: 14px;
     transform: translateY(0);
   }
   

4. 同步HTML结构
   给select添加required属性和对应的label标签，保持与input结构一致：

   <div class="form-group">
     <select required>
       <option value="" selected>Test</option>
       <option value="1">Option 1</option>
     </select>
     <label>Select Option</label>
   </div>
   

效果说明 #

修改后，Chrome/Edge中input与select的垂直基线将对齐，浮动标签行为也会和input保持一致，实现跨浏览器的统一显示效果。

内容的提问来源于stack exchange，提问作者Michael Schäfer