Question

在创建特定按钮时，有没有办法忽略Google CSS样式？这是我的jsfiddle，我想将按钮宽度更改为5 px，由于外部CSS而被忽略

HTML：

<input type="submit">

CSS：

input[type="submit"] {
height: 25px;
width: 5px;
border: 0;
-webkit-appearance: none;
}

Answer 1

如果您在google样式表后加载CSS，则可以使用您正在使用的选择器覆盖样式。如果您希望宽度为min-width: 72px

，Google会应用您需要覆盖的5px

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
input[type="submit"] {
    height: 25px;
    width: 5px;
    border: 2px dotted red;
    -webkit-appearance: none;
    background: green;
    color: white;
    min-width: 0;
}
</style>
<input type="submit">

Answer 2

使用以下CSS：

input[type="submit"] {
  width: 5px;
  min-width: 5px;
}

Google CSS包含的最小宽度为72像素。

Answer 3

正如迈克尔所说，在Google CSS之后加载你的CSS样式表，它会胜过它。或者，您可以将min-width: 5px;和max-width: 5px;添加到按钮CSS中，它将执行相同的工作。

<style>
input[type="submit"] {
    height: 25px;
    min-width: 5px;
    max-width: 5px;
    border: 2px dotted red;
    -webkit-appearance: none;
    background: green;
    color: white;
    min-width: 0;
}
</style>
<input type="submit">

按钮样式 - 忽略css

3 个答案: