如何删除输入类型的阴影=“提交”?

I am trying to remove the shadow of an <input type="submit" value="Login"/> inside a form but I cannot remove it.

我正在尝试删除一个的影子，但我无法删除它。

On the official documentation it says that you can set the box-shadow property to none value.

在官方文档中，它说可以将box-shadow属性设置为none值。

Value: none | <shadow> [ , <shadow> ]*

值:没有| [， ]*。

but it does not work.

但它不起作用。

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

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

I also tried with !important exception to see if it is something related about specificity but it also does not work.

我也尝试了!重要的例外，看看它是否与特异性有关，但它也不起作用。

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

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

Am I missing something? Why I cannot remove it?

我遗漏了什么东西?为什么我不能移除它?

Thanks in advance!

提前谢谢!

2 个解决方案

#1

It's not box-shadow, it's a special border. Just specify any border and it'll disappear.

它不是盒形阴影，它是一个特殊的边框。只要指定任何边框，它就会消失。

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

#2

It is border not shadow so you need to do border:none;

它不是阴影，所以你需要做边界:没有;

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