web-dev-qa-db-ja.com

HTMLボタン/送信の完全なスタイリングを削除します

Internet Explorerのボタンのスタイルを完全に削除する方法はありますか？ボタンにcss Spriteを使用しますが、すべて問題ありません。

しかし、ボタンをクリックすると、少し上に移動し、形が崩れます。 CSSのクリック状態、またはマウスダウンはありますか？その状態をトリガーするものがわかりません。

私はそれが本当に大したことではないことを知っていますが、時々それは重要な小さなことです。

htmlcssinternet-explorerbuttonstate
63
Saif Bechan

「ボタンをクリックすると、少し上に移動します」と言うときは、ボタンのマウスダウンクリック状態、マウスのクリックを放すとき、通常の状態に戻りますか？そして、次を使用してボタンのデフォルトのレンダリングを無効にしていること：

input, button, submit { border:none; }

もしそうなら..

個人的には、このIEネイティブアクションを実際に停止/オーバーライド/無効化できないことがわかったため、この動きを許可し、全体的な外観に影響を与えないようにマークアップを少し変更しましたさまざまな状態のボタン。

これが私の最終的なマークアップです。

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>
54
a darren

これはより徹底的なアプローチを提供すると思います：

button, input[type="submit"], input[type="reset"] {
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
}
<button>Example</button>
73
Kevin Leary

あなたの質問には「Internet Explorer」とありますが、他のブラウザに興味がある人は、ボタンでall: unsetを使用してスタイルを解除できます。

IEまたはEdge 18では機能しませんが、他のどこでも十分にサポートされています。

https://caniuse.com/#feat=css-all

button {
  all: unset;
}
<button>check it out</button>
11
Dan Fabulich

ボタンから境界線を削除してみてください。

input, button, submit
{
  border:none;
}
8
Sarfraz

bootstrapでは4が最も簡単です。次のクラスを使用できます：bg-transparentおよびborder-0

2
ValRob

ボタンの「アクティブ」状態だと思います。

0
Midhat