CSS开发中输入框下方边框不可见、按钮覆盖边框问题求助

问题根因 #

1. <input> 属于替换元素，浏览器原生不支持为其生成 ::before/::after 伪元素，你编写的 input 相关伪元素样式完全没有生效，自然不会显示对应的边框。
2. 你给 input、button 都设置了 display: block，块级元素默认独占一行，二者是上下堆叠排布，button 直接覆盖在 input 下方区域，自然会出现边框被覆盖、相邻边框无法连续的问题。
3. 两个元素都设置了 margin: auto 水平居中，也无法实现并排对齐的效果。

修复方案 #

我们可以通过嵌套容器 + flex 布局实现并排效果，将 input 外层套一个普通 div 来承载伪元素样式即可：

/* 新增父容器样式 */
.form-group {
  display: flex;
  width: 400px;
  margin: 0 auto;
  height: 60px;
}
input,
button {
  position: relative;
  cursor: pointer;
  border: 0;
  outline: 0;
  height: 100%;
}
/* input外层嵌套容器 */
.input-wrap {
  position: relative;
  flex: 0 0 300px;
}
input {
  width: 100%;
  border-radius: 10px 0 0 10px;
  opacity: 0;
}
button {
  flex: 0 0 100px;
}
.input-wrap:after {
  border-radius: 10px 0 0 10px;
  content: "Select package.json";
}
.input-wrap:after,
button:after {
  transition: all 200ms ease;
  background-color: #fcfcfc;
  border: 1px solid #afafaf;
  line-height: 60px;
  color: #252525;
  font-size: 1.5em;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
}
button:after {
  content: "Upload";
  border-radius: 0 10px 10px 0;
  /* 向左偏移1px覆盖相邻边框，实现边框连续效果 */
  left: -1px;
}
.input-wrap:hover:after,
button:hover:after {
  background-color: #f1f1f1;
}

对应的HTML结构参考：

<div class="form-group">
  <div class="input-wrap">
    <input type="file" accept=".json">
  </div>
  <button type="submit"></button>
</div>

内容的提问来源于stack exchange，提问作者Yannik K.