如何移除HTML相邻文本框间距 禁用input聚焦时边框自动变色

两个问题的修复方式如下，所有规则不影响后续新增页面元素：

• 文本框间距问题根源：<input>是行内块元素，HTML中两个标签之间的换行会被浏览器解析为空白字符，产生默认间隙，单纯设置margin:0无法消除这类间隙
• 点击边框变色问题根源：浏览器默认给聚焦状态的表单元素添加outline轮廓，部分浏览器会主动修改聚焦时的边框颜色

完整修复代码 #

CSS部分 #

/* 统一盒模型规则，从根源避免边框、内边距撑乱元素宽度，兼容所有后续新增元素 */
* {
  box-sizing: border-box;
}

.rz-map-address{
  border: 1px solid lightgray;
  height: 60px;
  width: 25%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  outline: none;
  /* 统一行内块垂直对齐方式，避免元素错位 */
  vertical-align: middle;
}

.rz-datetime{
  border: 1px solid lightgray;
  height: 60px;
  width: 10%;
  outline: none;
  vertical-align: middle;
  /* 抵消行内块间隙，同时和左侧输入框的边框重叠，实现无缝效果 */
  margin-left: -1px;
}

/* 覆盖浏览器默认聚焦样式，禁止点击时边框变色 */
.rz-map-address:focus,
.rz-datetime:focus {
  border-color: lightgray;
}

HTML部分 #

原有HTML结构无需任何修改：

<html>
<body>
<input type="text" name="rz_geo" value="" placeholder="city, airport, adress or hotel " class="rz-map-address" autocomplete="off" />
<input type="text" name="rz_geo" value="" placeholder="Date" class="rz-datetime" autocomplete="off" />
</body>
</html>

后续新增元素兼容说明 #

如果后续要在这一排继续加其他输入框/按钮，只需要给新增的元素做三个设置即可：

• 加上outline: none; vertical-align: middle;
• 除了最左侧的元素，其余并排元素都加margin-left: -1px;
• 按需给最右侧的元素添加右上、右下圆角即可

注意：不要用删除HTML标签之间换行、给父元素设置font-size:0的方式消间隙，前者后续维护代码时很容易因为格式化代码重新产生间隙，后者需要给所有子元素单独重设字体大小，维护成本更高。

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