Div Display Issue

Question

У меня есть div, что под моим полем отображается ошибка, если есть один в form.

Проблема заключается в том, если я использую inline-block, что когда-нибудь я в div области будет отображаться в цвете ошибки

Я только хочу background: red;, когда поле больше не является пустым.

div#alert-block { 
 
    height:15px; 
 
    clear:both; 
 
} 
 

 
.alert-error {  
 
    display: inline-block; 
 
    color: #fff; 
 
    background-color: #ff0000; 
 
    height:20px; 
 
    width: 100%; 
 
    clear:both; 
 

 
}

<div id="alert-block"> 
 
    <span class="alert-error">{email_error}</span> 
 
</div>

Answer 1

Попробуйте использовать: пусто после кода.

.alert-error:empty { 
    background-color: green; 
} 

для получения дополнительной информации и совместимости браузера проверки: https://css-tricks.com/almanac/selectors/e/empty/

или для дальнейшего улучшения (не уверен о совместимости браузера, хотя)

.alert-error:not(:empty) {  
    display: inline-block; 
    color: #fff; 
    background-color: #ff0000; 
    height:20px; 
    width: 100%; 
    clear:both; 
} 

Answer 2

Изменено width: auto в class«оповещения при ошибке ". Попробуй. Если нет сообщение об ошибке, то вы не получите background: red;. Надеюсь, это ваше требование!

div#alert-block { 
 
    height:15px; 
 
    clear:both; 
 
} 
 

 
.alert-error {  
 
    display: inline-block; 
 
    color: #fff; 
 
    background-color: #ff0000; 
 
    height:20px; 
 
    width: auto; 
 
    clear:both; 
 

 
}

<div id="alert-block"> 
 
    <span class="alert-error">{email_error}</span> 
 
</div>