html - 骨架网格用户代理样式表

Question

我刚开始使用骨架网格，它对我来说很棒，除了我刚刚添加了一个表单提交，还有一堆奇怪的样式添加到我的提交中......当我从检查元素中查看它时，它显示了所有这个

user agent stylesheetinput[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;
}

我如何乘坐它？

Answer 1

假设我正确理解您的问题...

那些是用户代理样式。浏览器应用的默认样式。默认样式应用于所有浏览器元素。它们使 h1 标签大于 h2 标签、body 标签 block 、span 内联等等……等等……

如果您想更改这些样式，则必须覆盖它们。例如:

如果你想在提交按钮上编辑填充，你可以将它添加到你的样式表中:

input[type="submit"] {
    padding: 5px 10px;
}