Html 如何向输入添加浮动标签

发布于03月24日

我希望当用户来try 在"输入"中输入文本时，标签会上升，如果他们将该区域留空，标签会返回到原始位置.如果用户在那里输入了什么，它就会留在那里.

我用输入框try 了这段代码，要求它可以正常工作，但当我try 用输入框做这件事，并在输入框中添加一些内容时，标签需要保持在上面.

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{
    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" placeholder="" >                             
     <label class="floating-label" >Button text</label>                        
</div>

我删除了input:not(:focus):valid~.floating-label，这样它就可以处理非必填字段

.form-group { position: relative; margin-bottom: 1.5rem; } input + .form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input:placeholder-shown + .form-control-placeholder { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; } .form-control:focus + .form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; } label{ position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; }

Html 如何向输入添加浮动标签

推荐答案

Html相关问答推荐

我似乎不能正确地将我的导航栏居中'

正文不能填满浏览器100%的高度

页脚与主要内容重叠

如何使用Reaction Js读取html文件中的代码

十进制数字不适用于格网项目的格网布局线放置中使用的SPAN关键字

当div位于flexbox中时，如何使div的宽度与高度相同

当多个a元素用作目标时的：target伪类

使用shinyjqui拖放到网格表中

如何将一个边框向下移动

如何调整底部有 SVG 的元素的高度，使其在所有宽度上看起来都不错？

Angular：从服务器下载 HTML 并打印

XPATH Select h2标签和
标签之间或h2标签和标签之间的td元素，以立即为准

标签之间或h2标签和标签之间的td元素，以立即为准

输入框不是全宽

两部分问题 - 是什么导致了这个空白？

如何使用 html 和 css 为卡片创建此背景框架

使用模板循环每行列出 3 个 bootstrap 卡

使用 tailwind css 将 HTML/CSS/JS 站点转换为 React App

html元素可以被css跳过吗？

我的卡片内容无法在 bootstrap 5 中正确居中

如何让我的页脚背景跨越整个视口？