2013-08-26 30 views
20

私は奇妙な状況があります。私は迷惑なホバー文字を白に変えているので、無効な入力ボタンをスタイルすることを試みています。これは、通常のボタンのように動作するため、ユーザに混乱を招くことになります。CSSで無効な入力をスタイリング

私は主にCSSといくつかのjQueryものを試しました。私はすべての可能性がある場合は、このCSSを維持したいと思います。

これは私のhtmlです。申し訳ありませんが、それは幼虫のフォームヘルパーです。

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }} 

と、これはブラウザが

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change"> 

を生成するものであると私はすべてのヘルプは素晴らしいだろう、この

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{ 
    color:green 
} 

ような何かに取り組んでいました!

+1

生成されたHTMLを投稿できますか? – ComFreek

+0

@Vectorボタンの上にマウスを置くとテキストの色が緑色に変わりますか? – ComFreek

答えて

44

使用このCSS(jsFiddle example)。

.btn:hover input:disabledは、ユーザによって現在ホバリングされているクラスbtnの要素に含まれる無効な入力要素を選択します。

私は議論のため、この質問を参照してください。[disabled]:disabledを好むだろう - いないブラウザちなみにShould I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?


を、Laravel(PHP)は、HTMLを生成します。これはのみ無効になっているボタンに影響を与えます

input[type="button"]:disabled{ 
    color:#000; 
} 

:あなたは次のCSSを使用することができます無効なボタンのスタイルを設定するには

<input type="button" disabled="disabled" value="hello world"> 
<input type="button" disabled value="hello world"> 
<input type="button" value="hello world"> 

+0

ありがとう、これは私のために完全に働いた。私と私の愚かなスペース! :) – zazvorniki

+0

素晴らしい、これはIE9で動作します! – Neolisk

+0

'[disabled]'と ':disabled'の使用には何らかの理由がありますか? (これも連鎖可能です→https://css-tricks.com/almanac/selectors/d/disabled/) –

1

CSSセレクタのスペースは、子要素を選択します。

.btn input 

これは、あなたが書いたもの基本的に、それはbtnクラスを持つすべての要素内<input>要素を選択することになります。

私はあなたがこれはhoveractivefocusの3つの異なる状態でdisabled属性とbtnクラスと<input>要素を選択することになる

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus 

を探していると思います。あなたが左右に最も内側の要素の最も外側の要素を記述する必要が

input:disabled.btn:hover, 
input:disabled.btn:active, 
input:disabled.btn:focus { 
    color: green 
} 

17

はちょうどあなたが3つのボタンがあるとしましょう。

は、あなたもこれを使用することができホバリング時に色の変化を停止するには:

input[type="button"]:disabled:hover{ 
    color:#000; 
} 

また、CSSリセットを使用することによって、これを回避することができます。

+1

なぜこれが下落したのですか?最新のブラウザには完全に有効なソリューションです。 – FakeRainBrigand

+4

ありがとう。私は私のCSSのキャリア全体が嘘であると考え始めようとしていました:) –

+0

@ thesaadarshad私はこの質問で私の答えにupvoteを受け取りました。偶然、私はあなたの答えを見ました。私はそれ以上私が覚えていない理由のために下降しました。私はdownvoteを元に戻すことができるように編集しました。 +1! – ComFreek

関連する問題