gpt4 book ai didi

html - 如何在css中选择被点击的输入

转载 作者:行者123 更新时间:2023-12-02 00:47:34 25 4
gpt4 key购买 nike

#registeration_form input:nth-of-type(1):focus ~ #underline1,#registeration_form input:nth-of-type(2):focus  ~ #underline2,#registeration_form input:nth-of-type(3):focus  ~ #underline3,#registeration_form input:nth-of-type(4):focus  ~ #underline4,#registeration_form input:nth-of-type(5):focus  ~ #underline5,#registeration_form input:nth-of-type(6):focus  ~ #underline6{
transition: 1000ms;
width: 100%;
}

有什么简单的方法可以编写这段代码吗?

最佳答案

我不太确定你在构建什么,但这里有一个猜测(基于命名),它会真正简化你的 CSS。基本上,我将事情更改为依赖于共享类,而不是特定的 id

.field .underline {
width: 0;
overflow: hidden;
transition: 100ms;
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background-color: black;
}

#registeration_form input:focus + .underline {
width: 100%;
}

.field {
display: inline-block;
position: relative;
margin-bottom: .5rem;
}

.field input {
border: 1px solid #eee;
padding: .5rem 1rem;
}
<form id="registeration_form">
<div class="field">
<input placeholder="Enter Name" aria-label="enter name" type="text" class="input" id="name" name="name">
<span role="presentation" class="underline"></span>
</div>

<div class="field">
<input placeholder="Enter Username" aria-label="enter username" type="text" class="input" id="username" name="username">
<span role="presentation" class="underline"></span>
</div>

<div class="field">
<input placeholder="Enter Email" aria-label="enter email" type="text" class="input" id="email" name="email">
<span role="presentation" class="underline"></span>
</div>
</form>

jsFiddle

关于html - 如何在css中选择被点击的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60533429/

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