输入元素上的边框不是 "straight"

Question

我正在对输入元素应用 CSS 边框，然后应用更粗的 border-top 样式。为什么这会产生奇怪的重叠效果？

input {
  width: 50%;
  border: 1px solid #ccc;
  border-top: 15px solid #414042
}

<input type="text" placeholder="NOME" required>

JSFIDDLE

这是左上角的详细信息：

为什么会发生这种情况，我该如何解决？

Answer 1

将 border-style 设置为 solid 并使用 border-width 将解决此问题。

input {
    background-position: left 10px top 25px;
    background-repeat: no-repeat;
    background-size: 10px auto;
    color: #414042;
    font-size: 25px;
    font-stretch: condensed;
    font-style: normal;
    font-weight: lighter;
    padding: 15px;
    text-indent: 20px;
    width: 50%;
    border-style: solid;
    border-width:1px;
    border-top:15px solid #414042
}

<input type="text" placeholder="NOME" required/>

Answer 2

尝试使用没有模糊的框阴影，但您必须添加边距

input {
    background-position: left 10px top 25px;
    background-repeat: no-repeat;
    background-size: 10px auto;
    border: 1px solid #ccc;
    color: #414042;
    font-size: 25px;
    font-stretch: condensed;
    font-style: normal;
    font-weight: lighter;
    padding: 15px;
    text-indent: 20px;
    width: 50%;
    box-shadow: 0px -15px 0px 0px #414042;
    margin-top: 15px;
}

<input type="text" placeholder="NOME" required>

输入元素上的边框不是 "straight"

Border-top on input element is not "straight"

html

css

border