CSS vor und nach Fehlermeldung

Question

Ich habe derzeit eine Suchleiste, wo der Hintergrund transparent ist, der Text und das Symbol ist weiß.

In dem Moment, in dem Sie eine ungültige Eingabe in die Suchleiste haben, wird darüber eine rote Fehlerbox angezeigt.

ich mag es ändern, so die untere Leiste wird rot/pink sowie die oben Bar hier gezeigt:

HTML:

<form class="form" id="travel-wizard-v2-form"> 
      <ul class="errors" style="display:none;"> 
       <li class="error tw2-location-error" style="display:none;">Please tell us where you would like to travel to</li> 
       <li class="error tw2-search-term-error" style="display:none;">Please enter a search term of at least 3 chars long.</li> 
      </ul> 

      <div class="input-group destination-cont"> 
       <input type="text" data-validate="true" data-validatetype="empty" id="tw2-destination" data-provide="typeahead" placeholder="Hotels Destination Placeholder" autocomplete="off"> 
       <span class="icon icon-search input-icon"></span> 
      </div> 

CSS:

.travel-wizard .travel-wizard-content .input-group input { 
height: 50px; 
background-color: rgba(255,255,255,.25); 
border: none; 
float: left; 
border-top-right-radius: 0; 
border-bottom-right-radius: 0; 
box-sizing: border-box; 
color: #ffffff; 
font-size: 13px; 
font-weight: 100; 
padding-left: 10px; 
} 

.travel-wizard .travel-wizard-content .icon.icon-search { 
top: 17px; 
display: block; 
background: 0 0; 
margin: 0; 
color: #ffffff; 
} 

So ist es einfach genug für mich, nur die Farbe zu ändern: schwarz; background-color: pink auf beiden CSS-Dateien und es sieht so aus, als ob es mit der obigen Fehlerleiste identisch wäre. Wie auch immer, ich brauche den Hintergrund, um pink zu werden und der Text und das Icon werden nur dann schwarz, wenn der Benutzer eine ungültige Eingabe hat!

Answer 1

Wenn wir nur, dass das <ul class="errors" style="display:none;"> Element erscheint in dem dom annehmen können, wenn ein Fehler auftritt, können Sie einen Geschwister-Selektor:

.errors + .destination-cont input { 
    color: black; 
    background-color: pink; 
}