css - 输入按钮移除 "shadow"

Question

我无法从一半的输入类型按钮中删除灰色“阴影”效果:

我检查了论坛上的所有方法但是:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: white;

没用...

例子:

.background {
  background-color: lightgrey;
  width: 400px;
  height: 300px;
}

.button {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: black;
  border-radius: 50%;
  border-width: 2px;
  border-color: white;
  width: 25px;
  height: 25px;
  color: white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: white;
}

.box {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: white;
  width: 200px;
  height: 100px;
}

<div class="background">
<div class="box">
</div>
<input type="button" class="button" value="x">
</div>

论坛发帖系统迫使我写更多的东西，因为我在帖子中有很多代码行。但是我不知道我还能写什么？一切都在图像和上面的代码中。所以我写下了这个论坛不喜欢的内容:“非常感谢 :-)”

Answer 1

是因为input type="button"中的border-style。

你有那个灰色阴影的原因是因为它设置为“开始”，将其更改为实体以将其删除:)

.button {
   background-color: black;
   border-radius: 50%;
   border-width: 2px;
   border-color: white;
   border-style: solid;
}