Question

I have a form where the default values disppear on focus and reappear on blur if the user did not input anything. The color of the text changes to a darker black when the user types in something, and if the textbox goes into blur with user-inputted text.

Problem: I cannot get the font to change to a darker black when the user types something in, or when the textbox goes into blur with user-inputted text without using !important. Did something go wrong that requires me to use !important, or is there a better way?

HTML Code

<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 Code

$(".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

I see what happened. IDs have higher precedence in CSS even if they appear before a class style rule to the same element. You can either leave !important there or change the last rule to this:

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