时间戳

首页 > 解决方案 > 未聚焦且输入包含文本且不需要 HTML 时的浮动标签

html - 未聚焦且输入包含文本且不需要 HTML 时的浮动标签

问题描述

我有浮动表单字段，它在焦点时浮动，如果我放置文本并取消焦点，它会回到原来的位置。我如何在 CSS 中处理这个谢谢。

查看代码片段并在输入中键入一些单词单击外部以查看问题。

编辑：<input>没有必需的标签，这就是我无法添加的原因 .user-input-wrp input:not(:focus):valid~.floating-label

input有属性时有效，required无属性时失败

.user-input-wrp {
    position: relative;
    width: 100%;
    margin: 30px 0;
}

.user-input-wrp .inputText {
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 1px solid #555555;
    box-shadow: none !important;
    background-color: transparent;
    font-size: 20px;
    font-weight: lighter !important;
    color: #555555;
    height: 34px;
}

.user-input-wrp .inputText:focus {
    border-color: #c57c49;
    border-width: medium medium 2px;
}

.user-input-wrp .floating-label {
    position: absolute;
    pointer-events: none;
    top: 25px;
    left: 10px;
    transition: 0.3s ease all;
    font-weight: lighter;
    color: #555555;
}


.user-input-wrp input:focus~.floating-label{
    top: 0px;
    left: 0px;
    font-size: 13px;
    opacity: 1;
    font-weight: lighter;
    color: #c57c49;
}
<div class="user-input-wrp">
    <br>
    <input id="name" type="text" name="name" class="inputText"/>
    <span class="floating-label">Name</span>
</div>

标签： htmlcss

解决方案

您可以依赖，:placeholder-shown但您至少需要一个空占位符：

.user-input-wrp {
  position: relative;
  margin: 30px 0;
}

.user-input-wrp .inputText {
  width: 100%;
  outline: none;
  border: none;
  border-bottom: 1px solid #555555;
  box-shadow: none !important;
  background-color: transparent;
  font-size: 20px;
  font-weight: lighter !important;
  color: #555555;
  height: 34px;
}

.user-input-wrp .inputText:focus {
  border-color: #c57c49;
  border-width: medium medium 2px;
}

.user-input-wrp .floating-label {
  position: absolute;
  pointer-events: none;
  bottom:2px;
  left: 10px;
  transition: 0.3s ease all;
  font-weight: lighter;
  color: #555555;
}

.user-input-wrp input:not(:placeholder-shown) ~ .floating-label,
.user-input-wrp input:focus ~ .floating-label{
  bottom: 80%;
  left: 0px;
  font-size: 13px;
  opacity: 1;
  font-weight: lighter;
  color: #c57c49;
}
<div class="user-input-wrp">
  <input id="name" type="text" name="name" class="inputText" placeholder=" " />
  <span class="floating-label">Name</span>
</div>

推荐阅读