将 <input type=submit 按钮的 CSS 样式恢复为其默认样式

Reverting CSS style of <input type=submit button to its default style

提问by

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.

这个脚本有一些用户界面和一个“ input type=submit....”标签。

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

网页 A 选择不设置 " input type=submit.." 标签的样式，而网页 B 已设置它们的样式。

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).

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

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'?

1. 如何设置提交按钮的 CSS 样式，使其以“默认方式”或“默认方式”显示？
2. 可以删除现有的样式吗，如果是这样，按钮如何以“默认方式”显示？

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?

换句话说，无论底层网页是否选择对其进行样式设置，我如何才能以“默认方式”显示书签的 UI 中的提交按钮？

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.

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

回答by Martijn Laarman

Taken from Mozilla Developer Center

取自Mozilla 开发者中心

Restoring the default property valueBecause 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.

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

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

您拥有的唯一方法是在其 css 规则中非常明确的按钮上设置您自己的类：即

background-color:grey !important;

instead of

代替

background:grey;

回答by jvvw

For Firefox you can find the default form styles by typing resource://gre/res/forms.css into the address bar, which does at least give you the details of the default style for an input button so that you can then copy them and override using a !important rule.

对于 Firefox，您可以通过在地址栏中键入 resource://gre/res/forms.css 来找到默认表单样式，这至少会为您提供输入按钮默认样式的详细信息，以便您可以复制它们并使用 !important 规则覆盖。

It's not entirely satisfactory though as the default style could of course change with a future version of the browser and the default style for different browsers might be different.

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

回答by jvvw

You can restrict the CSS styling of INPUT (Submit button is an input type) so it does not affect Submit buttons

您可以限制 INPUT 的 CSS 样式（提交按钮是一种输入类型），因此它不会影响提交按钮

So instead of just putting:

因此，而不是仅仅放置：

input{
blah; blah; blah;
}

You can create a style:

您可以创建样式：

input[type="text"] {
blah blah blah
}

And that will only affect the text input, leaving everything else including submit buttons as default.

这只会影响文本输入，将其他所有内容（包括提交按钮）保留为默认值。

JWW's refernce to resource://gre/res/forms.css is helpul. If you look at that you will see how to set a style to affect several different types of input.

JWW 对 resource://gre/res/forms.css 的引用很有帮助。如果您查看它，您将看到如何设置样式以影响几种不同类型的输入。

回答by AlfredQ

Thanks, used with good results

谢谢，使用效果不错

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;
}

回答by ldmason

The url above to the default styles in firefox no longer works in at least ff14, the new location is:

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

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

回答by user1005240

What i've done and it seems to work in all browsers is...

我所做的并且它似乎适用于所有浏览器的是......

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

by just leaving the background-color empty it seems to revert the button to its default state.

通过将背景颜色留空，它似乎可以将按钮恢复为默认状态。

回答by guidod

Thisseems to work beautifully (trust me, try it):

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

/* 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;
}

回答by Mahipat

You can use below style to reset button style to default style

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

.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 : '1C' '1D' '18' '19';
    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;
}

Reference link - GitHub

参考链接 - GitHub

Above is the solution to your problem but i don't think css reset is something feasible unless we end up in such situation, so try to avoid this kind of situations.

以上是您问题的解决方案，但我不认为 css reset 是可行的，除非我们最终遇到这种情况，所以尽量避免这种情况。

I hope this will help you.

我希望这能帮到您。

Thanks

谢谢

回答by Dilhan Maduranga

I came up with the same problem. This posts helped me a lot. I had to assign that CSS rule to text inputs in a special table but not to all of the text inputs in the page. So I had to used the CSS rule with id of the table. This should work fine with form ids.

我想出了同样的问题。这篇文章对我帮助很大。我必须将该 CSS 规则分配给特殊表格中的文本输入，而不是页面中的所有文本输入。所以我不得不使用带有表格 id 的 CSS 规则。这应该适用于表单 ID。

'#addForum note' is the id of the special formatted table.

'#addForum note' 是特殊格式表的 id。

#addForumNote input[type="text"], label, textarea{
  width: 425px;
  background-color: #ccc;
  border-style: solid;
  border: 1px;
  border-color: #7a7b7a;
}

Hope this may help someone. Thanks.

希望这可以帮助某人。谢谢。

回答by brettish

I don't think there is any way to access the calculated style. Javascript (as far as I know) can only set inline styles and assign classes. I wish the DOM style object had access to calculated styles, but sadly is does not.

我认为没有任何方法可以访问计算出的样式。Javascript（据我所知）只能设置内联样式和分配类。我希望 DOM 样式对象可以访问计算样式，但遗憾的是没有。

The best thing I can think of at this point is to simply declare your own css rules to override whatever the host site uses. As long as your css rule is more specific, it will win in the end. This will give your bookmarklet a consistent look and feel across browsers, which might not bee such a bad thing in the end.

在这一点上我能想到的最好的事情是简单地声明你自己的 css 规则来覆盖主机站点使用的任何内容。只要你的css规则更具体，它就会最终获胜。这将使您的书签在浏览器中具有一致的外观和感觉，这最终可能不是一件坏事。