CODEWITHSUNDEEP
htmlcsssass
Jim41Mavs
Jim41Mavs

Reputation: 572

CSS before and after Error Message

I currently have a search bar where the background is transparent, the text and icon is white.

At the moment when you have an invalid input into the search bar, a red error box renders above it. enter image description here

I want to change it up so the bottom bar turns red/pink as well as the above bar shown here: enter image description here

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 it's simple enough for me to just change the color: black; background-color:pink on both these CSS's files and it will make it look identical to the error bar above. However I need it's background to turn pink and it's text and icon go black only when the user has an invalid input!

enter image description here

Upvotes: 0

Views: 1531

Answers (1)

ugreen
ugreen

Reputation: 670

If we can assume that the <ul class="errors" style="display:none;"> element only appears in the dom when a error occurs, you could use a sibling selector:

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

Upvotes: 1

Related Questions