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中具有更高的优先级，即使它们出现在同一元素的类样式规则之前。您可以在此处离开！important或将最后一条规则更改为：

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

Answer 2

!important规则提供了一种让您觉得最重要的样式始终应用的方法。无论CSS规则文档中出现何种规则，都会应用具有!important规则的样式（在大多数情况下）。

应该！重要的是在这里使用？

2 个答案: