여기를 중요하게 사용해야합니까?

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 중 하나입니다.

당신이 텍스트를 흐리게 회색 색상을 적용 할 ID를 선택#splash_register_form input을 사용하기 때문에 다시 입력 단어가 회색으로 이유하지만 클래스 선택.splash_register_have_userinput는 사용자가 입력 한 텍스트를 적용합니다.

그리고 id 선택기의 우선 순위가 클래스 선택기보다 높습니다. 따라서 포커스가 입력을 떠나는 동안 회색 색상이 다시 나타나 클래스 선택기를 재정의합니다.

상황을 해결하기 위해, 당신은 (경우 같은 페이지에서 다른 div의과 입력을에) 당신의 DIV에 클래스 이름을 추가 클래스 선택를 사용하여 회색 색상을 적용하고, input.className처럼 더 정확한 선택을 사용할 수 있습니다 검은 색을 적용합니다. 코드에서 !important을 제거 할 수 있습니다.