CSS-Stil von <input type = submit button in den Standard-Stil zurücksetzen

Question

Ich verwende ein Bookmarklet, das ein Skript-Tag in die aktuelle Webseite einfügt.

Dieses Skript enthält einige Benutzeroberflächen und ein "input type=submit...." -Tag.

Webseite A hat sich entschieden, die Tags "input type=submit.." nicht zu stylen, während Webseite B sie formatiert hat.

Dies führt dazu, dass das Bookmarklet unterschiedlich formatierte Submit-Schaltflächen für anzeigt, die auf dem Stil der zugrunde liegenden Seite basieren.

Ich möchte die Senden-Schaltflächen identisch auf allen Webseiten in seine Standard-Art gestylt werden.

Eine Lösung besteht darin, den CSS-Stil für die Übergabeschaltfläche in meinem Skript so festzulegen, dass es auf allen Seiten identisch angezeigt wird. (Dies ist, was ich für alle anderen Tags getan habe).

Meine Frage ist:

1. Wie kann ich den CSS-Stil für die Absenden-Button festgelegt, so dass es in einer 'default Weise' zeigt oder?
2. Kann man vorhandene Stile entfernen, und wenn ja, wie für die Schaltfläche, so dass sie in der 'Standardart' angezeigt wird?

Mit anderen Worten: Wie kann ich die Tasten einreichen innerhalb der Benutzeroberfläche meines Bookmarklet in der ‚default Weise‘ angezeigt werden, unabhängig davon, ob die zugrunde liegende Webseite ausgewählt hat oder nicht stylen?

Hinweis: Mit "Standardart" meine ich die Art und Weise, wie die Übergabeschaltfläche angezeigt wird, wenn ihr kein Styling hinzugefügt wurde. Zum Beispiel die "Google-Suche" oder "Ich bin glücklich" Tasten auf http://www.google.com.

Answer 1

Entnommen Mozilla Developer Center

Wiederherstellen der Standardeigenschaft Wert Da CSS bietet keine „default“ Schlüsselwort, der einzige Weg, um den Standardwert einer Eigenschaft wiederherzustellen, ist ausdrücklich zu re- deklariere diese Eigenschaft. Beim Schreiben von Stilregeln mit Selektoren (z. B. Selektoren nach Tag-Namen, z. B. p), die Sie möglicherweise mit spezifischeren Regeln überschreiben möchten (z. B. mithilfe von ID- oder Klassenselektoren), sollten Sie besondere Vorsicht walten lassen Der Standardwert kann nicht automatisch wiederhergestellt werden. Aufgrund der Kaskadenform von CSS empfiehlt es sich, Stilregeln so spezifisch wie möglich zu definieren, um Stilelemente zu verhindern, die nicht als Stilvorlagen gedacht sind.

Der einzige Weg, Sie haben, ist Ihre eigene Klasse auf der Schaltfläche festlegen, die in ihren CSS-Regeln sehr deutlich ist: i.e

background-color:grey !important; 

statt

background:grey; 

Answer 2

Für Firefox Sie die Standard-Form Stile, indem Sie Ressourcen finden können: //gre/res/forms.css in die Adressleiste, die am wenigsten Sie sich bei geben die Details des Standardstils für eine Eingabeschaltfläche, sodass Sie sie anschließend kopieren und mit einer! wichtigen Regel außer Kraft setzen können.

Es ist jedoch nicht ganz zufriedenstellend, da sich der Standard-Stil natürlich mit einer zukünftigen Version des Browsers ändern könnte und der Standard-Stil für verschiedene Browser anders aussehen könnte.

Answer 3

Sie können die CSS-Styling von INPUT beschränken (Senden-Schaltfläche ist ein Eingabetyp), so dass es wirkt sich nicht auf Tasten Senden

Anstatt also nur darum:

input{ 
blah; blah; blah; 
} 

Sie einen Stil erstellen:

Und das betrifft nur die Texteingabe, alles andere einschließlich Senden Schaltflächen als Standard.

JWW Verweis auf Ressource: //gre/res/forms.css ist helpul. Wenn Sie sich das ansehen, sehen Sie, wie Sie einen Stil festlegen, der sich auf verschiedene Eingabearten auswirkt.

Answer 4

Danke, mit guten Ergebnissen verwendet

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

Answer 5

kam ich mit dem gleichen Problem auf. Diese Beiträge haben mir sehr geholfen. Ich musste diese CSS-Regel Texteingaben in einer speziellen Tabelle zuweisen, aber nicht für alle Texteingaben auf der Seite. Also musste ich die CSS-Regel mit der ID der Tabelle verwenden. Dies sollte mit Form-IDs funktionieren.

'#addForum note' ist die ID der speziellen formatierten Tabelle.

 

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

Hoffen, das kann jemand helfen. Vielen Dank.

Answer 6

Ich glaube nicht, dass es eine Möglichkeit gibt, auf den berechneten Stil zuzugreifen. Javascript (soweit ich weiß) kann nur Inline-Stile festlegen und Klassen zuweisen. Ich wünschte, das DOM-Style-Objekt hätte Zugriff auf berechnete Styles, tut es aber leider nicht.

Das Beste, was ich an diesem Punkt denken kann, ist einfach Ihre eigenen CSS-Regeln zu deklarieren, um zu überschreiben, was auch immer die Host-Site verwendet. Solange Ihre CSS-Regel spezifischer ist, wird sie am Ende gewinnen. Dadurch erhält Ihr Bookmarklet ein konsistentes Erscheinungsbild in allen Browsern, das am Ende vielleicht nicht so schlimm ist.

Answer 7

Die URL oben auf die Standard-Stile in Firefox funktioniert nicht mehr in mindestens FF14, der neue Standort ist:

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

Answer 8

Was ich getan habe, und es scheint, in allen Browsern zu arbeiten ...

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

Wenn Sie einfach die Hintergrundfarbe leer lassen, scheint die Schaltfläche den Standardzustand wiederherzustellen.

Answer 9

This scheint schön zu arbeiten (glauben Sie mir, versuchen Sie es):

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

Answer 10

Sie unter Stil verwenden können Schaltfläche Stil auf die Standard Stil

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

Referenz zurücksetzen Verbindung - GitHub

Oben ist die Lösung für Ihr Problem, aber ich denke nicht, dass CSS Reset ist etwas machbar, es sei denn, wir landen in einer solchen Situation, also versuchen Sie, diese Art von Situationen zu vermeiden.

Ich hoffe, das wird Ihnen helfen.

Danke