如何刪除輸入類型的陰影=「提交」？

Question

我試圖刪除form中的<input type="submit" value="Login"/>的shadow，但我無法刪除它。

在official documentation它說，你可以將box-shadow屬性設置爲none的值。

Value：none | <shadow> *，

但它不起作用。

#loginButton{ 
 
\t font-size: 25px; 
 
\t border-radius: 5px; 
 
\t background-color: #ff751a; 
 
\t box-shadow: none; 
 
}

<form action="login.html"> 
 
\t <input id="loginButton" type="submit" value="Login"/> 
 
</form>

我也!important exception想看看它是否涉及約specificity的東西，但它也不起作用。

#loginButton{ 
 
\t font-size: 25px; 
 
\t border-radius: 5px; 
 
\t background-color: #ff751a; 
 
\t box-shadow: none !important; 
 
}

<form action="login.html"> 
 
    <input id="loginButton" type="submit" value="Login"/> 
 
</form>

我缺少的東西？爲什麼我不能刪除它？

在此先感謝！

Answer 1

這不是箱形陰影，它是一個特殊的邊框。只需指定任何邊框，它就會消失。

#loginButton { 
 
    font-size: 25px; 
 
    border-radius: 5px; 
 
    background-color: #ff751a; 
 
    border: 1px solid silver; 
 
}

<form action="login.html"> 
 
    <input id="loginButton" type="submit" value="Login"/> 
 
</form>

Answer 2

它的邊界沒有陰影，所以你需要做的邊界：無;

#loginButton{ 
    font-size: 25px; 
    border-radius: 5px; 
    background-color: #ff751a; 
    border:none; 
}