gpt4 book ai didi

html - 如果需要,CSS 输入效果将不起作用

转载 作者:搜寻专家 更新时间:2023-10-31 22:37:59 26 4
gpt4 key购买 nike

<分区>

如果输入标签中需要,标签效果将起作用。但是如果我删除所需的属性,效果将不起作用 Click to see working fiddle有什么解决办法吗?

html

<div class="group ">
<input type="text" required="" class="module-input" />
<label >Name</label>
</div>

片段:

.module-input {
font-size: 14px;
padding-top: 12px;
display: block;
width: 97%;
border: none;
border-bottom: 1px solid #94a3a9;
background-color: transparent;
color: #5a686d;
margin-bottom: 2%;
}

input:focus {
outline: none;
}

.group {
position: relative;
margin-bottom: 25px;
}


/* LABEL */

label {
color: #94a3a9;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0.5%;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}


/* active state */

input:focus+label,
input:valid+label {
top: -8px;
font-size: 12px;
color: #94a3a9;
}
<div class="group ">
<input type="text" class="module-input" />
<label>Name</label>
</div>

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