Question

我正在尝试将border-radius添加到输入提交按钮，但是当我这样做时，Chrome也会添加灰色背景颜色和方框阴影。

如何使用border-radius来圆角，并保持背景颜色为白色，并且没有框阴影？

这是我的HTML：

<input type="submit" id="nm-match" class="nm-button" value="Match" />

我的CSS：

.nm-button {
  border-radius: 5px;
}

以下是问题的演示：http://jsfiddle.net/CJg43/3/

Answer 1

在chrome上使用检查器并滚动到元素.m按钮。（以最快的方式直接右键单击按钮并说出inspect元素）如果你查看Elements选项卡（应该是弹出的第一个，并在样式部分的右侧看，它将显示所有的css样式是应用于该元素，无论它们是由你还是由Chrome放在那里（关于这个样式部分很酷的是样式是按优先顺序排列的，所以你可以很容易地告诉哪些样式覆盖哪些（更高的样式覆盖了较低的样式））或者即使它们是元素的默认值（例如display: block;总是在像div这样的块级元素上。）这是一个方便的工具。

因此，如果您在这种情况下执行此操作，您将看到chrome将不同的样式应用于输入样式。这些主要是因为输入[type =“submit”]而被应用。如果你想在大多数情况下覆盖这些样式，只需在你的按钮上覆盖相同的样式就足够了。添加以下内容应该没问题，如果你只想覆盖背景颜色的样式“box-shadow”（它实际上是创建阴影的边框，所以只需添加一个新的边框）

.nm-button { 
    border-radius: 5px;
    background-color: #fff; 
    border: 1px solid #ccc;
}

此外，因为它是一个按钮，建议类似以下代码，因此它看起来可点击。

.nm-button:hover {
    background-color: #ddd;
    cursor: pointer;
}

以下是您在案例中使用chrome放置的样式。它很多但是铬的方法非常简约，所以这一切都很容易被覆盖。（P.S.我希望这有帮助，如果您有任何问题，请随时发表评论。）

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
  padding: 1px 6px;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  padding: 2px 6px 3px;
  border: 2px outset buttonface;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-color: buttonface;
  box-sizing: border-box;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
  white-space: pre;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
  -webkit-appearance: textfield;
  padding: 1px;
  background-color: white;
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
  margin: 0em;
  font: -webkit-small-control;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex, meter, progress {
  -webkit-writing-mode: horizontal-tb;
}

在Chrome中，添加border-radius也会添加背景颜色。为什么？

1 个答案: