エラーメッセージの前後のCSS

Question

現在、背景が透明である検索バーがあります。テキストとアイコンは白です。

検索バーに無効な入力がある瞬間に、赤いエラーボックスがその上に表示されます。上記バーが、ここで示したように、私はそれを変更したい

ので下のバーは、同様に赤/ピンクを回す：

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; 
} 

それでは、私は色を変えるだけで十分簡単です：黒; background-color：これらのCSSファイルの両方にピンク色があり、上のエラーバーと同じに見えるようになります。しかし、私はそれがピンクになるバックグラウンドが必要とテキストとアイコンは、ユーザーが無効な入力を持っている場合にのみ黒になります！

Answer 1

私たちは、あなたが兄弟セレクタを使用することができ、エラーが発生したときに<ul class="errors" style="display:none;">要素が唯一のDOMに表示されていることを前提とすることができた場合：あなたの入力/助けを

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