为什么浮动标签不能以 html css 形式工作

发布于 2025-01-16 18:57:16 字数 1567 浏览 2 评论 0原文

当需要字段时，浮动标签就可以使用。当我从输入标签中删除必需的属性时，它停止工作。

div{
  margin-top:40px;
}
.btn-add input[type="text"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add input:focus ~ .floating-label,
.btn-add input:not(:focus):valid ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.btn-add-link input[type="url"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add-link input:focus ~ .floating-label,
.btn-add-link input:not(:placeholder-shown)~.floating-label,
.btn-add-link input:not(:focus):valid ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}
.form-float{
    position: relative;
}

<div class="form-float btn-add"> 
     <input type="text" class="inputText"  >                             
     <label class="floating-label">Button text</label>                         </div>

我不希望将此字段作为必填字段，我该如何修复它。我怎样才能在不需要输入的情况下完成浮动标签工作

原文

Float label is work when the field is required. When i remove required attribute from the input tag it stop working.

div{
  margin-top:40px;
}
.btn-add input[type="text"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add input:focus ~ .floating-label,
.btn-add input:not(:focus):valid ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.btn-add-link input[type="url"]{
    width: 90%;
    padding: 10px 20px 0 20px;
    border: none;
    border-bottom:1px solid #999;
    font-size: 140%;
    color: #000;
}
.btn-add-link input:focus ~ .floating-label,
.btn-add-link input:not(:placeholder-shown)~.floating-label,
.btn-add-link input:not(:focus):valid ~ .floating-label{
    top: -20px;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
    opacity: 1;
    color: rgb(100, 6, 6);   
}
.floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top:10px;
    transition: 0.2s ease all;
    color: #999999;
    font-size: 120%;
}
.form-float{
    position: relative;
}

<div class="form-float btn-add"> 
     <input type="text" class="inputText"  >                             
     <label class="floating-label">Button text</label>                         </div>

I don't want this field as required field how can i fix it. how can i do that float label work without making input required

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬色的秋千 2025-01-23 18:57:16

选择器 input:focus 在获得焦点时选择输入，选择器 input:not(:focus):valid 在有效输入但未获得焦点时选择它。由于您不希望输入字段必须被填充，因此您必须删除：

input:not(:focus):valid~.floating-label

The selector input:focus selects the input when it get focus and the selector input:not(:focus):valid selects it if it is valid input but not focused. Since you don't want the input field to be necessarily to be filled, you have to remove: