gpt4 book ai didi

html - 错误消息前后的 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 09:39:35 27 4
gpt4 key购买 nike

我目前有一个搜索栏,背景是透明的,文本和图标是白色的。

当您在搜索栏中输入无效内容时,会在其上方呈现一个红色错误框。 enter image description 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;
}

所以我只需更改颜色就够简单了:黑色;在这两个 CSS 文件上使用 background-color:pink ,这将使它看起来与上面的错误栏相同。但是我需要它的背景变成粉红色,并且只有当用户输入无效时它的文本和图标才会变黑!

enter image description here

最佳答案

如果我们可以假设<ul class="errors" style="display:none;">元素仅在发生错误时出现在 dom 中,您可以使用兄弟选择器:

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

关于html - 错误消息前后的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40043527/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com