边框不可见

Question

为什么输入框下面看不到边框？

此外，按钮越过边框，边框对于它旁边的按钮是连续的，但对于输入字段不是。

我的 CSS

input,
button {
  display: block;
  position: relative;
  width: 300px;
  margin: auto;
  cursor: pointer;
  border: 0;
  height: 60px;
  outline: 0;
}
input {
  border-radius: 10px 0 0 10px;
}
button {
  width: 100px;
}
input:after {
  border-radius: 10px 0 0 10px;
}
input:after,
button:after {
  transition: 200ms all 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;
  content: "Select package.json";
}
button:after {
  content: "Upload";
  border-radius: 0px 10px 10px 0;
}
input:hover:after,
button:hover:after {
  background-color: #f1f1f1;
}

Answer 1

我对@9​​87654321@做了一些小调整，并为input添加了一些边框属性。

input,
    button {
        display: inline-flex;
        position: relative;
        width: 300px;
        margin: auto;
        cursor: pointer;
        height: 60px;
        outline: 0;
        line-height: 60px;
        font-size: 1.5em;
        border: 0;
        padding: 0;
    }
    input {
        border-radius: 10px 0 0 10px;
        border-top: 1px solid #afafaf;
        border-right: 0;
        border-bottom: 1px solid #afafaf;
        border-left: 1px solid #afafaf;
        padding: 0 0 0 12px;
        
    }
    button {
        width: 100px;
    }
    input:after {
        border-radius: 10px 0 0 10px;
    }
    input:after,
    button:after {
        transition: 200ms all ease;
        background-color: #fcfcfc;
        border: 1px solid #afafaf;
        color: #252525;
        text-align: center;
        width: 100%;
        height: 100%;
        display: inline-block;
        content: 'Select package.json';
    }
    button:after {
        content: 'Upload';
        border-radius: 0px 10px 10px 0;
    }
    input:hover:after,
    button:hover:after {
        background-color: #f1f1f1;
    }

<input/><button></button>