在占位符CSS中移动标签 [英] Move label in placeholder CSS

问题描述

我有这个示例：

链接

代码HTML：

<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

代码CSS：

.field{
  position: relative;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label {
  top: -6px;
}

基本上我想要当用户在输入中写东西时，标签被移动

Basically I want when the user writes something in the input, the label is moved over the input.

只能从css获得吗？

您能不能更改示例我

预先感谢！

推荐答案

我希望这是您所需要的。

i hope this is what you need. but there is a problem when you unfocused input.

我只是对 HTML 所做的改动很小。

i just make little changes in HTML.

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
}

<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>

这篇关于在占位符CSS中移动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！