18 css bookmarklet
我正在使用一个书签,将脚本标签插入当前网页.
此脚本中包含一些UI和" input type=submit...."标记.
网页A选择不input type=submit..标记" "标签,而网页B标注它们.
这导致书签基于底层页面的样式显示不同样式的提交按钮.
我希望提交按钮以默认方式在所有网页上以相同的方式设置样式.
一种解决方案是在我的脚本中为提交按钮设置CSS样式,使其在所有页面上以相同的方式显示.(这是我为所有其他标签所做的).
我的问题是:
换句话说,无论底层网页是否选择了样式,我如何才能以"默认方式"显示我的书签的UI中的提交按钮？
注意:"默认方式"是指未添加样式时显示提交按钮的方式.例如,http://www.google.com上的"Google搜索"或"我感觉很幸运"按钮.
恢复默认属性值 因为CSS不提供"default"关键字,所以恢复属性默认值的唯一方法是显式重新声明该属性.因此,在使用选择器(例如,按标签名称的选择器,例如p)编写样式规则时,应特别注意您可能希望使用更具体的规则(例如使用id或类选择器的规则)覆盖它们,因为原始默认值值无法自动恢复.由于CSS的级联性质,最好尽可能具体地定义样式规则,以防止不打算设置样式的样式元素.
你唯一的方法是在css规则中非常明确的按钮上设置你自己的类:ie
background-color:grey !important;
代替
background:grey;
对于Firefox,您可以通过在地址栏中输入resource://gre/res/forms.css来找到默认的表单样式,这至少可以为您提供输入按钮的默认样式的详细信息,以便您可以复制它们并使用!important规则覆盖.
这并不完全令人满意,因为默认样式当然可以随着浏览器的未来版本而改变,并且不同浏览器的默认样式可能会有所不同.
小智 6
您可以限制INPUT的CSS样式("提交"按钮是输入类型),因此它不会影响"提交"按钮
所以不要只是放:
input{
blah; blah; blah;
}
你可以创建一个样式:
input[type="text"] {
blah blah blah
}
这只会影响文本输入,其他所有内容都包括提交按钮作为默认值.
JWW参考资源://gre/res/forms.css是helpul.如果您看一下,您将看到如何设置样式以影响几种不同类型的输入.