如何删除提交按钮上的底部和右侧框阴影？答案

【问题标题】：How to remove bottom and right box shadow on submit button?如何删除提交按钮上的底部和右侧框阴影？
【发布时间】：2015-09-10 03:24:27
【问题描述】：

我对这个话题做了很多研究，但找不到正确的答案。

我有一个输入按钮，我想要一个带有白色背景的灰色边框。但是当我将背景设置为白色时，它会自动在按钮的底部和右侧创建一个像边框一样的阴影。我似乎无法删除它。下面是css代码和HTML

任何帮助将不胜感激。谢谢！

CSS：

  input{
  display: inline-block;
  height: 40px;
  width: 380px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  background-color: white;
}

HTML：

<input id="sign_in"  type="submit" value="Sign In">

【问题讨论】：

尝试在输入中添加box-shadow: none;
您的意思是要删除按钮的默认渐变？如果是这样，只需添加规则outline: 0;和border:1px solid grey;，它就不会像边框一样呈现阴影。
@JCOC611：你为什么不把它添加为答案？
@naveen 只是确保这就是 OP 的意思
@JCOC611 说得对：jsfiddle.net/ryanpcmcquen/noqjvv1h

标签： html css

【解决方案1】：

您说您希望按钮周围有一个灰色边框，但您还没有在您的 CSS 中应用它。

更新你的 CSS：

input{
  display: inline-block;
  height: 40px;
  width: 380px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  background-color: white;
  border: 2px solid grey;  /*Add your border property*/
}

【讨论】：

【解决方案2】：

一旦您更改按钮的背景颜色，浏览器就会添加复古边框。修复它就像添加以下规则一样简单：

outline: 0;
border: 1px solid grey;

【讨论】：