輸入元素的邊框頂部不是「直線」

我將CSS邊框應用於輸入元素，然後應用更厚的border-top樣式。爲什麼這有一個奇怪的重疊效應？輸入元素的邊框頂部不是「直線」

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

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

JSFIDDLE

這裏的左上角的一個細節：
enter image description here

爲什麼會出現這種情況，我該如何解決？

來源

2015-05-21 MultiformeIngegno

你能給輸出的圖片添加邊距和預期的輸出（如果需要的話，將其模擬在油漆中）？ – Pureferret

嘗試使用箱陰影，沒有模糊，你必須雖然

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>

來源

2015-05-21 17:01:06

這似乎工作正常！ ;） – MultiformeIngegno

-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/>

來源

2015-05-21 16:59:49

是的..我不需要改變外邊框顏色 – MultiformeIngegno

輸入元素的邊框頂部不是「直線」

回答

相關問題