如何製作一個平坦的外觀提交按鈕？

在這裏，我有一個提交按鈕：如何製作一個平坦的外觀提交按鈕？

<input type="submit" value="submit" />

而且我想添加一些額外的風格使它成爲一個平的樣子：

input { 
    border: 0; 
    background: none; 
    -webkit-appearance: none; 
}

這是它的外觀算賬：

但是，如果仔細觀察，仍然會有一些邊框在提交按鈕的頂部...... 有沒有辦法去除凹陷或凸起的表面並使其看起來平坦？

來源

2015-12-31 Karl Bao

在標準的html/css中，你的代碼會使按鈕變平。我認爲還有其他規則適用於此輸入。 – Ianis

請添加小提琴，以便我們可以更好地檢查它。 – shadeed9

是否覆蓋了其他樣式？ –

您需要邊框，箱陰影和背景設置爲0 /無按鈕的看到，以消除任何灰色的外觀。然後刪除圓角設置border-radius爲0px。

規則是：

input[type="submit"] 
/* Or better yet try giving an ID or class if possible*/ 
{ 
border: 0; 
background: none; 
box-shadow: none; 
border-radius: 0px; 
}

來源

2015-12-31 08:29:38 kushalvm

我看到按鈕的角落是圓形的。也許這是由影響它的其他風格造成的。嘗試刪除border-radius這樣的：

input { 
    border: 0; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
}

如果不解決這個問題，那麼你就需要檢查什麼風格，它是將上邊框。您可以嘗試使用CSS !important與邊框聲明（不推薦BTW）：

input { 
    border: 0 !important; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
}

來源

2015-12-31 08:16:58 shadeed9

input { 
    border: 0 none hlsa(0,0%,0%,0); 
    outline: 0 none hlsa(0,0%,0%,0); 
    box-shadow: none; 
    background: none; 
    -webkit-appearance: none; 
}

即使outline是不是瀏覽器的默認（據我所知），在引導（如果傻冒使用它或其他simular框架）outline應用於即使它是沒有顯示計算風格。我仍然在尋找那個問題。順便說一句，我沒有添加border-radius，因爲我想你可能想要圓角，並且它不應該是一個問題。

來源

2015-12-31 08:30:26 zer00ne

outline: none;將是我的第一個猜測。

，你也可能會想要刪除的:focus狀態和:hover狀態，所以

input[type="submit"]:focus { 
background:none; 
outline: none; 
border:none; 
} 


input[type="submit"]:hover { 
background: none; 
border: none; 
outline: none; 
box-shadow: none; 
}

這使得當按下時，它不會有一個強調輪廓。

如果不起作用，請嘗試移除其他樣式，例如box-shadow:none;,border-radius:none;。

來源

2015-12-31 08:52:55

如何製作一個平坦的外觀提交按鈕？

回答

相關問題