web-dev-qa-db-ja.com

CSS:無効になっているHTMLボタンの影を削除します

HTMLボタンを無効にすると、ボタンのテキストに影が追加されます。自分でボタンのスタイリングをしているのですが、影のない単色(白)にしたいのですが、どうしたらいいのかわかりません。

私の以前の方法は、それを有効のままにして、ボタンのホバー+アクティブ状態のスタイルを変更し、クリックヴァイJavascriptを無視することでした。あなたに言った、あまり効率的ではない!

http://jsfiddle.net/gLfMX/

編集:影を表示する画像(IE9で表示中)+ズームバージョン。

enter image description here

14
Alex Guerin

何時間もいじった後、IEではできないという結論に達しました。

JQueryを使用してすべてのボタンクリックを処理するため、CSSで選択されたプロパティが適用されているボタンはすべて無視します。確かに、それはおそらく最もエレガントなソリューションではありませんが、クロスブラウザビューベールです。

助けてくれたニコールとダンファースに感謝します。

4
Alex Guerin

あなたはすでにあなた自身の答えを投稿しました、しかしここにもう少し情報があります。

私の実験から、私は同じ結論に達しました。IEでは、CSSから変更することはできません。これが理由です。

無効になっているボタンの色は、Windowsが表示するように構成されているものによって異なります 「ウィンドウの色と外観」の「3Dオブジェクト」項目の場合 (表示設定の下)。

無効になっているボタンのデフォルトの色は、text = A0A0A0、shadow = whiteです。ユーザーがデフォルトを変更した場合(Windows 7では「詳細設定」に移動する必要があります)は異なる場合がありますが、ほとんどの人がこれらを使用します。これらは、無効にされたボタンのシステムデフォルトの背景色であるF4F4F4に合うように設計されています。

enter image description here

この問題の私の解決策は、少なくともデフォルト設定では、IE無効化されたボタンがOKに見えるようにCSSを設計することです-最善のアプローチは、無効化されたときに背景をF4F4F4に設定することです:

button[disabled], a[disabled] {
    background-color: #f4f4f4;
}

私のように Bootstrap を使用している場合は、代わりにこれを行う必要があります。

.btn[disabled], .btn.disabled[disabled] {
    background-color: #f4f4f4;
}

条件付きセレクターを追加して、IEでのみこれを有効にすることもできます。

9
sinelaw

追加 border:none;影を取り除く jsfiddle

8
Danferth

ボタン内のテキストの影を取り除く方法の例を次に示します。メニューボタンの影を取り除こうとしていました。

CSSでトップメニューのスタイルを設定した後、通常のメニューのスタイルを探しました。 「テキストシャドウ」のスタイリングを最初に目にするところはどこでも、そこに問題があります。私はここで私のものを見つけました:

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:
    #77778b;font-family:'Oswald', Arial, sans-serif;text-shadow:none;}

テキストシャドウが#FFFFFFに設定され、いくつかの配置が適用されました。このスタイリングとバムを削除しただけで、ボタンに影ができなくなりました。

メニューCSSで最初に「text-shadow」が適用されている場所を探し、「text-shadow:none」に設定するだけです。

1
jay

これも機能します:

input[disabled] {
   border: none;
}

http://jsfiddle.net/gLfMX/2/

このようにして、他の入力に干渉することを心配することなく、無効にされた入力を具体的にターゲットにすることができます。

0
Nicole McCoy