如何使用自定义 CSS 制作带有浮动标签的轮廓输入？

Question

我想使用浮动标签进行输入。与 react 的 material-ui 完全一样。

材质界面代码：

<TextField
  id="outlined-basic"
  label="E-Mail"
  variant="outlined"
  placeholder="Enter E-Mail"
  /> 

查看上述代码输出的链接：Code

我想要的是，标签必须在输入字段内。当用户单击输入字段时，标签应该浮动并且应该显示占位符。如果用户没有输入任何内容并且焦点发生变化，则必须再次隐藏占位符并且标签必须返回到初始位置

到目前为止我尝试过的是：

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .material-textfield {
    position: relative;
    }

    label {
    position: absolute;
    font-size: 1rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: gray;
    padding: 0 0.3rem;
    margin: 0 0.5rem;
    transition: 0.1s ease-out;
    transform-origin: left top;
    pointer-events: none;
    }
    input {
    font-size: 1rem;
    outline: none;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 1rem 0.7rem;
    color: gray;
    transition: 0.1s ease-out;
    }
    input:focus {
    border-color: #6200ee;
    }
    input:focus + label {
    color: #6200ee;
    top: 0;
    transform: translateY(-10%) scale(0.9) !important;
    }
    input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(0.9) !important;
    }

    input:empty + label {
    transform: translateY(75%);
    font-weight: bold;
    }

    input:empty:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(0.9) !important;
    }

    input:empty::-webkit-input-placeholder {
    opacity: 0;
    }

<div class="container">
    <div class="material-textfield">
      <input placeholder="placeholder" type="text" />
      <label> label</label>
    </div>
  </div>

Answer 1

您大部分时间都在使用您的代码。最重要的是要注意，:empty 对输入没有任何意义。它将始终应用，因为输入不能有子代。

虽然:placeholder-shown 几乎是设置空输入样式的主要解决方法。

我删除了大部分:empty 样式，并用:placeholder-shown 替换了一些样式。

我做的另一件事是将焦点和非空转换设置为相同。

input:not(:focus)::placeholder {
  opacity: 0;
}

这使得占位符仅在未聚焦时才隐藏。

这是完整的结果：

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.material-textfield {
  position: relative;
}

label {
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  color: gray;
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
}

input {
  font-size: 1rem;
  outline: none;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1rem 0.7rem;
  color: gray;
  transition: 0.1s ease-out;
}

input:focus {
  border-color: #6200ee;
}

input:focus+label {
  color: #6200ee;
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
}

input:not(:placeholder-shown)+label {
  top: 0;
  transform: translateY(-50%) scale(0.9) !important;
}

input:not(:focus)::placeholder {
  opacity: 0;
}


}

<div class="container">
  <div class="material-textfield">
    <input placeholder="placeholder" type="text" />
    <label> label</label>
  </div>
</div>

总而言之，Material Design 收缩标签存在一些可访问性问题。因此，请确保您了解潜在的问题。

https://www.matsuko.ca/blog/stop-using-material-design-text-fields/