恢复<；的CSS样式；输入类型=将按钮提交到其默认样式

我正在使用一个bookmarklet，在当前网页中插入一个脚本标记

此脚本有一些UI和一个“

input type=submit…”

”标记

网页A已选择不设置“

input type=submit..

”标记的样式，而网页B已设置它们的样式

这将导致bookmarklet显示不同样式的submit 基于基础页面样式的按钮

我希望所有网页上的提交按钮都以默认方式设置为相同的样式

一种解决方案是在我的脚本中设置提交按钮的CSS样式 所以它在所有页面上都显示相同。（这就是我为所有人所做的 其他标签）

我的问题是:

如何设置提交按钮的CSS样式，使其以 “默认方式”还是

是否可以删除现有样式，如果可以，如何删除按钮以“默认方式”显示

换言之，如何在用户界面中设置提交按钮 bookmarklet将以“默认方式”显示，无论 底层网页是否已选择对其进行样式设置

注意：“默认方式”是指未添加样式时提交按钮的显示方式。例如“谷歌搜索”或 “我感到很幸运”按钮打开

取自

恢复默认属性值 因为CSS不提供“default”关键字，所以恢复属性默认值的唯一方法是显式地重新声明该属性。 因此，在使用选择器（例如，按标记名选择的选择器，如p）编写样式规则时应特别小心，因为无法自动恢复原始默认值，您可能希望使用更具体的规则（例如，使用id或类选择器的规则）覆盖这些选择器。 由于CSS的级联特性，最好尽可能明确地定义样式规则，以防止对不打算进行样式化的元素进行样式化

唯一的方法是在按钮上设置自己的类，该按钮在css规则中非常明确： i、 e

而不是

background:grey;

---

对于Firefox，您可以通过键入resource://gre/res/forms.css 进入地址栏，它至少会为您提供输入按钮的默认样式的详细信息，以便您可以复制它们并使用！重要规则

---

但这并不完全令人满意，因为默认样式当然会随着浏览器的未来版本而改变，而且不同浏览器的默认样式可能会有所不同

您可以限制输入的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;
}

---

我也遇到了同样的问题。这些帖子对我帮助很大。我必须将CSS规则分配给一个特殊表中的文本输入，而不是页面中的所有文本输入。因此，我必须使用CSS规则和表的id。这应该可以很好地处理表单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规则更具体，它最终会赢。这将使您的bookmarklet在不同浏览器中具有一致的外观和感觉，这最终可能不是一件坏事。

以上firefox中默认样式的url至少在ff14中不再有效，新位置是：

resource:///chrome/toolkit/res/forms.css

---

我所做的并且似乎在所有浏览器中都有效的是

$(buttonID).css({
'background-color':''
});

只需将背景色留空，按钮就会恢复到默认状态。

似乎工作得很好（相信我，试试看）：

---

您可以使用下面的样式将按钮样式重置为默认样式

。重置此设置{
动画：无；
动画延迟：0；
动画方向：正常；
动画持续时间：0；
动画填充模式：无；
动画迭代次数：1；
动画名称：无；
动画播放状态：运行；
动画计时功能：轻松；
背面可见性：可见；
背景：0；
背景附件：滚动条；
背景剪辑：边框框；
背景色：透明；
背景图像：无；
背景来源：填充框；
背景位置：0；
背景位置x:0；
背景位置y:0；
背景重复：重复；
背景尺寸：自动；
边界：0；
边框样式：无；
边框宽度：中等；
边框颜色：继承；
边界底部：0；
边框底色：继承；
边框左下半径：0；
边框右下半径：0；
边框底部样式：无；
边框底宽：中等；
边界塌陷：分离；
边界图像：无；
左边框：0；
边框左颜色：继承；
左边框样式：无；
左边框宽度：中等；
边界半径：0；
右边界：0；
边框右颜色：继承；
右边框样式：无；
右边框宽度：中等；
边界间距：0；
边界顶部：0；
边框顶部颜色：继承；
边框左上半径：0；
边框右上角半径：0；
边框顶部样式：无；
border-t
$(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;
}