Html 单击时形成不同的颜色
我为页脚创建了一个表单,当您单击输入时,文本和边框底部将从灰色转换为白色 HTML:Html 单击时形成不同的颜色,html,css,forms,css-transitions,Html,Css,Forms,Css Transitions,我为页脚创建了一个表单,当您单击输入时,文本和边框底部将从灰色转换为白色 HTML: <div class="footer"> <div class="footerContainer"> <form> <input type="text" class="name" placeholder="Name"/> <input type="text" class="subject" placehold
<div class="footer">
<div class="footerContainer">
<form>
<input type="text" class="name" placeholder="Name"/>
<input type="text" class="subject" placeholder="Subject"/>
<input type="tel" class="phone" placeholder="Phone Number"/>
<textarea type="text" class="details" placeholder="Details"></textarea>
<input type="submit" class="submit" placeholder="Submit"/>
</form>
</div>
.footer{
height: 100%;
width: 100%;
background-color: grey;
display: flex;
justify-content: center;
align-items: center;
}
.footerContainer{
display: flex;
justify-content: center;
align-items: center;
background-color: darkgrey;
width: 25%;
padding: 2vw;
margin: 2vw;
}
.name, .subject, .phone{
background-color: transparent;
border: 0;
border-bottom: solid #bababa 1px;
height: 2.8vw;
font-size: 2vw;
color: #bababa;
transition: color linear 0.5s;
margin-bottom: 1vw;
font-family: 'Lora', sans-serif;
width: 100%;
}
textarea{
background-color: transparent;
border: 0;
border-bottom: solid #bababa 1px;
height: 10vw;
font-size: 2vw;
color: #bababa;
transition: color linear 0.5s;
margin-bottom: 1vw;
font-family: 'Lora', sans-serif;
resize: none;
width: 100%;
}
.submit{
float: right;
border: 1px solid black;
border-radius: 0.4vw;
height: 2vw;
width: 4.5vw;
font-size: 1vw;
background-color: #92F398;
cursor: pointer;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
color: #bababa;
transition: color linear 0.5s;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{
color: white;
transition: color linear 0.5s;
}
input:focus, textarea:focus{
color: white;
border-bottom: solid white 1px;
transition: color linear 0.5s;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
我想实现的是,当用户在表单中输入了一些内容,然后单击关闭它时,输入的文本将保持为白色(它不会这样做)
很抱歉,如果这篇文章没有完全遵守规则,有这么多。我尽可能地将其格式化。您可以使用以下技巧:
input:valid{
color: white;
}
添加此css,所有有效输入都将具有白色文本颜色
此外,您还可以将minlength=“4”
添加到输入中。添加可以决定输入何时应更改颜色
试着写点东西看看
给你你试过这个吗:
.name、.subject、.phone、textarea{color:#fff;}
可能重复了,谢谢。然而,“valid”是什么意思呢?:valid选择器选择具有根据元素设置进行验证的值的表单元素。