我正在使用一个将脚本标记插入当前网页的书签。
此脚本中包含一些用户界面和一个“input type=submit....”标记。
网页A选择不设置“input type=submit..”标签的样式，而网页B则设置样式。
这导致书签显示不同样式的提交 基于底层页面风格的按钮。
我希望在所有网页上以默认方式对提交按钮进行相同的设置。
一种解决方案是在我的脚本中为提交按钮设置CSS样式 所以它在所有页面上都显示相同的内容。 （这是我为所有人所做的 其他标签）。
我的问题是：
换句话说，如何在我的UI中提交提交按钮 无论是否，bookmarklet都以“默认方式”显示 底层网页是否选择了它的样式？
注意：“默认方式”是指在没有添加样式时显示提交按钮的方式。例如“Google搜索”或 http://www.google.com上的'我感觉很幸运'按钮。
答案 0 :(得分：8)
恢复默认属性值 由于CSS不提供“default”关键字，因此恢复属性默认值的唯一方法是显式重新声明该属性。 因此，在使用选择器（例如，按标签名称的选择器，例如p）编写样式规则时，应特别注意您可能希望使用更具体的规则（例如使用id或类选择器的规则）覆盖它们，因为原始默认值值无法自动恢复。 由于CSS的级联性质，最好尽可能具体地定义样式规则，以防止不打算设置样式的样式元素。
唯一的方法是在css规则中非常明确的按钮上设置自己的类： 即
background-color:grey !important;
而不是
background:grey;
答案 1 :(得分：7)
对于Firefox，您可以通过在地址栏中输入resource：//gre/res/forms.css来找到默认的表单样式，这至少可以为您提供输入按钮的默认样式的详细信息，以便您可以然后复制它们并使用！important规则覆盖。
虽然默认样式当然可能会随着浏览器的未来版本而改变，并且不同浏览器的默认样式可能会有所不同，但这并不完全令人满意。
答案 2 :(得分：6)
您可以限制INPUT的CSS样式（“提交”按钮是输入类型），因此它不会影响“提交”按钮
所以不要只是把：
input{
blah; blah; blah;
}
您可以创建样式：
input[type="text"] {
blah blah blah
}
这只会影响文本输入，其他所有内容都包括提交按钮。
JWW参考资源：//gre/res/forms.css是helpul。如果您看一下，您将看到如何设置样式以影响几种不同类型的输入。
答案 3 :(得分：1)
谢谢，结果很好
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;
}
答案 4 :(得分：1)
上面的url到firefox中的默认样式不再适用于至少ff14，新位置是：
resource:///chrome/toolkit/res/forms.css
答案 5 :(得分：0)
我想出了同样的问题。这篇文章给了我很多帮助。我必须将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;
}
希望这可能有助于某人。感谢。
答案 6 :(得分：0)
我认为没有办法访问计算出的样式。 Javascript（据我所知）只能设置内联样式和分配类。我希望DOM样式对象可以访问计算出的样式，但遗憾的是没有。
此时我能想到的最好的事情就是简单地声明自己的css规则来覆盖主机站点使用的任何内容。只要你的css规则更具体，它最终会获胜。这将使您的书签在浏览器中具有一致的外观和感觉，这最终可能不会是一件坏事。
答案 7 :(得分：0)
我所做的一切似乎适用于所有浏览器......
$(buttonID).css({
'background-color':''
});
只需将背景颜色留空，似乎将按钮恢复为默认状态。
答案 8 :(得分：0)
This似乎工作得很漂亮（相信我，试试看）：
/* 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;
}
答案 9 :(得分：0)
您可以使用以下样式将按钮样式重置为默认样式
.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重置是可行的，除非我们最终处于这种情况，所以尽量避免这种情况。
我希望这会对你有所帮助。
由于