我正在使用一个将脚本标签插入当前网页的书签。
这个脚本有一些用户界面和一个“ input type=submit....”标签。
网页 A 选择不设置 " input type=submit.." 标记的样式，而网页 B 已设置
我正在使用一个将脚本标签插入当前网页的书签。
这个脚本有一些用户界面和一个“ input type=submit....”标签。
网页 A 选择不设置 " input type=submit.." 标记的样式，而网页 B 已设置它们的样式。
这会导致小书签根据底层页面的样式显示不同样式的提交按钮。
我希望所有网页上的提交按钮都以默认方式设置相同的样式。
一种解决方案是在我的脚本中为提交按钮设置 CSS 样式，以便它在所有页面上显示相同。（这是我为所有其他标签所做的）。
我的问题是：
换句话说，无论底层网页是否选择了样式，我如何才能让我的书签 UI 中的提交按钮以“默认方式”显示？
注意：“默认方式”是指未添加样式时提交按钮的显示方式。例如， http://www.google.com上的“Google 搜索”或“我感觉很幸运”按钮。
好吧，任何恶意 JavaScript 最终都会通过浏览器功能发挥作用，因此这个概念验证演示可能符合您的要求。它利用页面可以动态创建指向给定 URL 的链接这一事实，然后检查它是什么颜色，以确定您的浏览器是否认为该站点是您浏览历史的一部分。该链接所做的只是尝试猜测您的性别，但同样的想法也可用于攻击 - 例如，它可以测试主要银行的 URL，并为您提供针对您使用的任何银行定制的网络钓鱼攻击。
当然，这可能（应该）在未来的浏览器版本中得到修复，但大多数漏洞利用都是如此。
恢复默认属性值 因为 CSS 不提供“default”关键字，所以恢复属性默认值的唯一方法是显式地重新声明该属性。因此，在使用选择器（例如，按标签名称的选择器，例如 p）编写样式规则时应特别小心，您可能希望用更具体的规则（例如使用 id 或类选择器的规则）覆盖这些规则，因为原始默认值无法自动恢复。由于 CSS 的级联特性，最好尽可能具体地定义样式规则，以防止样式化元素不打算设置样式。
您唯一的方法是在其css规则中非常明确的按钮上设置您自己的类：即
background-color:grey !important;
代替
background:grey;
对于 Firefox，您可以通过在地址栏中键入 resource://gre/res/forms.css 来找到默认表单样式，这至少可以为您提供输入按钮的默认样式的详细信息，以便您可以复制它们并使用 !important 规则覆盖。
这并不完全令人满意，因为默认样式当然会随着浏览器的未来版本而改变，并且不同浏览器的默认样式可能会有所不同。
您可以限制 INPUT 的 CSS 样式（提交按钮是一种输入类型），因此它不会影响提交按钮
因此，不仅仅是放：
input{
blah; blah; blah;
}
您可以创建样式：
input[type="text"] {
blah blah blah
}
这只会影响文本输入，将包括提交按钮在内的所有其他内容保留为默认值。
JWW 对 resource://gre/res/forms.css 的引用很有帮助。如果您看一下，您将看到如何设置样式以影响几种不同类型的输入。
谢谢，使用效果很好
INPUT, SELECT
{
color: #003333;
font-size: 90%;
border-bottom: #d3d3d3 1px solid;
border-left: #d3d3d3 1px solid;
border-top: #d3d3d3 1px solid;
border-right: #d3d3d3 1px solid;
}
INPUT[type="submit"]
{
background-color: #336699;
color: #f0e68c;
}
Firefox 中默认样式的 url 至少在 ff14 中不再有效，新位置是：
resource:///chrome/toolkit/res/forms.css
您可以使用以下样式将按钮样式重置为默认样式
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}参考链接 - GitHub
以上是您问题的解决方案，但我不认为 css reset 是可行的，除非我们最终遇到这种情况，所以尽量避免这种情况。
我希望这能帮到您。
谢谢
我所做的，它似乎适用于所有浏览器是......
$(buttonID).css({
'background-color':''
});
只需将背景颜色留空，它似乎就可以将按钮恢复为默认状态。
这似乎工作得很好（相信我，试试吧）：
/* Restore Browser's Default Submit Button Style */
input[type=submit] {
background:ButtonFace;
color:ButtonText;
border:2px outset ButtonFace;
}
input[type=submit]:active {
border-style:inset;
-webkit-appearance:push-button;
}
我想出了同样的问题。这篇文章对我帮助很大。我必须将该 CSS 规则分配给特殊表格中的文本输入，而不是分配给页面中的所有文本输入。所以我不得不使用带有表 id 的 CSS 规则。这应该适用于表单 ID。
'#addForum note' 是特殊格式表的 id。
#addForumNote input[type="text"], label, textarea{
width: 425px;
background-color: #ccc;
border-style: solid;
border: 1px;
border-color: #7a7b7a;
}
希望这可以帮助某人。谢谢。
我认为没有任何方法可以访问计算的样式。Javascript（据我所知）只能设置内联样式和分配类。我希望 DOM 样式对象可以访问计算的样式，但遗憾的是没有。
在这一点上我能想到的最好的事情就是简单地声明你自己的 css 规则来覆盖主机站点使用的任何内容。只要你的css规则更具体，它最终会赢。这将使您的书签在浏览器中具有一致的外观和感觉，这最终可能不是一件坏事。