web-dev-qa-db-ja.com

<input type = submitボタンのCSSスタイルをデフォルトのスタイルに戻す

現在のWebページにスクリプトタグを挿入するブックマークレットを使用しています。

このスクリプトには、いくつかのUIと「input type=submit.... "タグが含まれています。

WebページAは、スタイルを設定しないことを選択しました "input type=submit.. "タグですが、WebページBはそれらのスタイルを設定しています。

これにより、ブックマークレットには、基になるページのスタイルに基づいて異なるスタイルの送信ボタンが表示されます。

送信ボタンのスタイルをすべてのWebページでデフォルトの方法で同じにしたい。

1つの解決策は、スクリプト内の送信ボタンのCSSスタイルを設定して、すべてのページで同じように表示されるようにすることです。 （これは私が他のすべてのタグに対して行ったことです）。

私の質問は：

  1. 送信ボタンのCSSスタイルを「デフォルトの方法」で表示されるように設定するにはどうすればよいですか？
  2. 既存のスタイルを削除できますか？削除する場合は、ボタンを「デフォルトの方法」で表示する方法を教えてください。

つまり、基になるWebページがスタイル設定を選択したかどうかに関係なく、ブックマークレットのUI内の送信ボタンを「デフォルトの方法」で表示するにはどうすればよいですか？

注：「デフォルトの方法」とは、スタイルが追加されていない場合の送信ボタンの表示方法を意味します。たとえば、 http://www.google.com の「Google検索」または「ラッキーだ」ボタン。

cssbookmarklet
18
molicule

Mozilla Developer Center から取得

デフォルトのプロパティ値の復元CSSは「default」キーワードを提供しないため、プロパティのデフォルト値を復元する唯一の方法は、明示的に復元することです。そのプロパティを宣言します。したがって、セレクター（pなどのタグ名によるセレクター）を使用してスタイルルールを作成する場合は、特に注意が必要です。元のデフォルトは、より具体的なルール（idまたはクラスセレクターを使用するルールなど）でオーバーライドする必要があります。値を自動的に復元することはできません。 CSSはカスケードの性質があるため、スタイル設定を意図していないスタイル要素を防ぐために、スタイルルールをできるだけ具体的に定義することをお勧めします。

あなたが持っている唯一の方法は、そのcssルールで非常に明示的なボタンに独自のクラスを設定することです：すなわち

background-color:grey !important;

の代わりに

background:grey;
8
Martijn Laarman

Firefoxの場合、アドレスバーにresource：//gre/res/forms.cssと入力すると、デフォルトのフォームスタイルを見つけることができます。これにより、少なくとも入力ボタンのデフォルトスタイルの詳細が表示されるので、それらをコピーできます。 ！importantルールを使用してオーバーライドします。

デフォルトのスタイルはもちろんブラウザの将来のバージョンで変更される可能性があり、ブラウザごとにデフォルトのスタイルが異なる可能性があるため、完全に満足できるものではありません。

7
jvvw

INPUTのCSSスタイルを制限して（送信ボタンは入力タイプです）、送信ボタンに影響を与えないようにすることができます

したがって、単に置く代わりに：

input{
blah; blah; blah;
}

スタイルを作成できます。

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

そして、それはテキスト入力にのみ影響し、送信ボタンを含む他のすべてをデフォルトのままにします。

JWWによるresource：//gre/res/forms.cssへの参照は役に立ちます。それを見ると、いくつかの異なるタイプの入力に影響を与えるスタイルを設定する方法がわかります。

6
Brian

おかげで、良い結果で使用

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

Firefoxのデフォルトスタイルへの上記のURLは、少なくともff14では機能しなくなりました。新しい場所は次のとおりです。

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

計算されたスタイルにアクセスする方法はないと思います。 Javascript（私が知る限り）は、インラインスタイルを設定してクラスを割り当てることしかできません。 DOMスタイルオブジェクトが計算されたスタイルにアクセスできることを望みますが、残念ながらアクセスできません。

この時点で私が考えることができる最善のことは、ホストサイトが使用するものをすべてオーバーライドする独自のcssルールを宣言することです。あなたのcssルールがより具体的である限り、それは最終的に勝ちます。これにより、ブックマークレットのルックアンドフィールがブラウザ間で一貫し、最終的にはそれほど悪いことにはならない可能性があります。

0
brettish

私は同じ問題を思いついた。この投稿は私を大いに助けました。そのCSSルールを特別なテーブルのテキスト入力に割り当てる必要がありましたが、ページのすべてのテキスト入力に割り当てる必要はありませんでした。そのため、テーブルのIDでCSSルールを使用する必要がありました。これはフォームIDで正常に機能するはずです。

'#addForum note'は、特別にフォーマットされたテーブルのIDです。


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

これが誰かを助けるかもしれないことを願っています。ありがとう。

0
Dilhan Maduranga

これ は美しく機能しているようです（私を信じて、試してみてください）：

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

私がやったことは、すべてのブラウザで機能するようです...

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

背景色を空のままにしておくと、ボタンがデフォルトの状態に戻ったように見えます。

0
user1005240

以下のスタイルを使用して、ボタンのスタイルをデフォルトのスタイルにリセットできます

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

参照リンク- GitHub

上記はあなたの問題の解決策ですが、私たちがそのような状況に陥らない限り、cssリセットは実行可能なものではないと思いますので、このような状況を避けるようにしてください。

これがお役に立てば幸いです。

ありがとう

0
Mahipat