将< input type = submit按钮的CSS样式恢复为其默认样式 [英] Reverting CSS style of <input type=submit button to its default style

问题描述

我使用的书签在当前网页中插入脚本标签。

此脚本有一些UI和

网页A选择不输入样式输入

这会导致bookmarklet显示不同样式的提交

我想要以默认方式在所有网页上对提交按钮设置相同的样式 p>

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

我的问题是：

1. 如何设置提交按钮的CSS样式，使其以
   '默认方式显示？


2. 可以删除现有的样式，如果是，可以如何按钮以默认方式显示？

换句话说，如何在我的
bookmarklet的UI中以默认方式显示提交按钮，而不管底层网页是否
是否选择了风格？

注意：默认方式是指没有样式时显示提交按钮的方式添加到它。例如 http://www.google上的Google搜索或
我很幸运按钮.com 。

解决方案

取自 Mozilla开发人员中心

恢复默认属性值
因为CSS不提供default关键字，恢复属性默认值的唯一方法是显式重新声明该属性。
因此，在使用选择器（例如，通过标签名称的选择器，如p）编写样式规则时应特别小心，您可能想用更具体的规则（例如使用id或类选择器的那些规则）因为原来的默认值不能自动恢复。
由于CSS的级联性质，最好尽可能具体地定义样式规则，以防止样式元素不被设置样式。

你拥有的唯一方法是在按钮上设置自己的类，这在css规则中是非常明确的：
ie

  background-color：gray！important; 
  

而不是

  background：gray; 
  

I'm using a bookmarklet that inserts a script tag into the current web page.

This script has some UI and an "input type=submit...." tag in it.

Web page A has chosen not to style "input type=submit.." tags whereas web page B has styled them.

This results in the bookmarklet displaying differently styled submit buttons based on the underlying page's style.

I want the submit buttons to be styled identically on all web pages in its default manner.

One solution is to set the CSS style for the submit button within my script so it shows up identically on all pages. (This is what I have done for all other tags).

My question is:

1. How do I set the CSS style for the submit button so it displays in a 'default manner' or ?
2. Can one remove existing styling, and, if so, how for the button so that it displays in the 'default manner'?

In other words, how can I have the submit buttons within the UI of my bookmarklet be displayed in the 'default manner' regardless of whether the underlying web page has chosen to style it or not?

Note: By 'default manner' I mean the way the submit button is displayed when no styling is added to it. For example the 'Google search' or 'I'm feeling lucky' buttons on http://www.google.com.

解决方案

Taken from Mozilla Developer Center

Restoring the default property value Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property. Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored. Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.

The only way you have is to set your own class on the button that is very explicit in its css rules: i.e

background-color:grey !important;

instead of

background:grey;

这篇关于将< input type = submit按钮的CSS样式恢复为其默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！