Div-Anzeige Problem

Question

Ich habe eine div, die unter meinem Feld, dass eine Fehler angezeigt wird, wenn es eine in einem form gibt.

Das Problem ist, wenn ich inline-block verwenden, was auch immer ich in dem div Bereich wird in der Fehlern Farbe

Ich mag nur background: red; gezeigt werden, wenn das Feld nicht mehr leer.

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

Versuchen Sie es mit: leer, nachdem Sie den Code.

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

für weitere Informationen und Browser-Kompatibilitätsprüfung: https://css-tricks.com/almanac/selectors/e/empty/

oder weiter zu verbessern (nicht sicher, obwohl über Browser-Kompatibilität)

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

Answer 2

Changed width: auto im class„alert-Fehler ". Versuch es. Wenn es keine Fehler Nachricht gibt, dann erhalten Sie background: red; jetzt nicht. Hoffe, das ist deine Anforderung!

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>