错误消息之前和之后的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

如果我们可以假设[{"SMS":"hello","NUM":12345},{"SMS":"bye","NUM":54321}] 元素仅在发生错误时出现在dom中，则可以使用兄弟选择器：

my $json = JSON->new->utf8;
my $perl_data = $json->decode($content);
print ref($perl_data) . "\n";