ここで重要なのは使用する必要がありますか？

Question

私は、デフォルト値がフォーカスを失ってしまい、ユーザが何も入力しなかった場合にはぼかしに再現するフォームを持っています。テキストの色は、ユーザーが何かを入力したとき、およびテキストボックスがユーザー入力のテキストでぼかしになった場合に、暗い黒に変わります。

問題：私はときに、ユーザーの種類で何かフォントが暗い黒に変更し得ることができない、またはテキストボックスが!importantを使用せずにユーザーが入力したテキストにぼかしになったとき。 !importantを使用する必要がある何かが間違っていたのですか、それとも良い方法がありますか？私は何が起こったのか見

HTMLコード

<div id="splash_register_form"> 
     <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" /> 
     <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" /> 
     <input type="text" name="register_email" class="splash_register_long_input" title="Email" /> 
     <input type="text" name="register_password" class="splash_register_long_input" title="Password" /> 
</div> 

jQueryのコード

$(".splash_register_short_input, .splash_register_long_input").each(function() { 
    $(this).val($(this).attr('title')); 
}); 

$(".splash_register_short_input, .splash_register_long_input").focus(function() { 
    if($(this).val() == $(this).attr('title')) { 
     $(this).val(''); 
    } 
}); 

$(".splash_register_short_input, .splash_register_long_input").blur(function() { 
    if($(this).val() == '') { // If there is no user input 
     $(this).val($(this).attr('title')); 
     $(this).removeClass('splash_register_have_userinput'); 
    } else { // If there is user input 
     $(this).addClass('splash_register_have_userinput'); 
    } 
}); 

CSS

.splash_register_long_input { 
    height: 22px; 
    width: 300px; 
    padding: 3px 0px 3px 8px; 
    margin: 0px 1px 2px 0px; 
    float: left; 
    font-family: Arial, Sans-Serif; 
    font-weight: bold; 
    border: 1px solid #5cb5ee; 
} 

.splash_register_long_input:focus { 
    border: 2px solid #5cb5ee; 
    width: 298px; 
    height: 20px; 
} 

.splash_register_short_input{ 
    height: 22px; 
    width: 144px; 
    padding: 3px 0px 3px 8px; 
    margin: 0px 1px 2px 0px; 
    float: left; 
    font-family: Arial, Sans-Serif; 
    font-weight: bold; 
    border: 1px solid #5cb5ee; 
} 

.splash_register_short_input:focus { 
    border: 2px solid #5cb5ee; 
    width: 142px; 
    height: 20px;/ 
} 

.splash_register_short_input:focus, .splash_register_long_input:focus { 
    color: #333 !important; 
    -webkit-box-shadow:0 0 10px #5cb5ee; 
    -moz-box-shadow:0 0 10px #5cb5ee; 
    box-shadow:0 0 10px #5cb5ee; 
    outline: none; /* prevent chrome from adding border */ 
} 

#splash_register_form input { 
    color: #AAA; 
} 

.splash_register_have_userinput { 
    color: #333 !important; 
} 

Answer 1

。同じ要素に対するクラススタイルルールの前に表示されていても、IDの優先順位はCSSで高くなります。 ！あなたはどちらかが重要残したり、これに最後のルールを変更することができます。

#splash_register_form .splash_register_have_userinput { 
    color: #333 !important; 
} 

Answer 2

!importantルールは常に適用され、最も重要であると感じたスタイルを持っている方法を提供します。 !importantルールを持つスタイルは、そのルールがCSSドキュメントのどこに表示されていても（ほとんどの場合）適用されます。

Answer 3

ここにコードのsolutionの1つです。

あなたがテキストをぼかすためにグレー色を適用するためにIDセレクタ#splash_register_form inputを使用しているため、バック入力ワードはグレーに理由が、クラスセレクタ.splash_register_have_userinputは、ユーザ入力テキストを適用します。

idセレクタの優先度がクラスセレクタより高いためです。フォーカスが入力を離れている間、灰色が戻ってクラスセレクタをオーバーライドします。状況を解決するために

、あなたは、（場合には、あなたが同じページで他のdivと入力を持っている）あなたのdivにクラス名を追加しクラスセレクタを使用してグレー色を適用し、input.classNameのように、より正確なセレクタを使用することができますあなたのコードからあなたの!importantを削除することができます。