CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nyxynyx
Nyxynyx

Reputation: 63647

Should !important be used here?

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;
}

Upvotes: 1

Views: 117

Answers (3)

taiansu
taiansu

Reputation: 2775

Here is one of the solution of your code.

The reason why the input word back to gray because you use id selector #splash_register_form input to apply gray color to blur texts, but class selector .splash_register_have_userinput to apply user input texts.

And cause the id selector's priority is higher the class selector. So while your focus leave the input, the gray color came back and override the class selector.

To solve the situation, you can add a class name to your div (in case you have other divs and inputs at the same page), apply the gray color using class selector, and use more precise selector like input.className to apply the black color.Then you can remove your !important from your code.

Upvotes: 0

James Johnson
James Johnson

Reputation: 46057

The !important rule provides a way to have the styles you feel are most crucial always applied. A style that has the !important rule will (in most cases) be applied no matter where that rule appears in the CSS document.

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78540

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;
}

Upvotes: 3

Related Questions