How to remove shadow of input type="submit"?

Question

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.

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!

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

Answer 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;
}