在占位符 CSS 中移动标签答案

【问题标题】：Move label in placeholder CSS在占位符 CSS 中移动标签
【发布时间】：2019-09-11 18:40:14
【问题描述】：

我有这个样本：

编码 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;
}

基本上我希望当用户在输入中写一些东西时，标签会移到输入上。

只能从css中获取吗？

您能否更改我创建的示例以准确了解这是如何完成的？

提前致谢！

【问题讨论】：

when the user writes something in the input 。这会生成一个事件，您可以使用 javaScript 但不能使用 CSS（仅）控制该事件。此外，选择器input:focus ~ .label 将选择具有类label 的输入的兄弟（在DOM 树的下方）。 label 和 input 不是兄弟姐妹。如果他们是，标签是在输入之前。
可能我没有正确表达自己，关于焦点事件，CSS中也存在这种情况
选择器input:focus ~ .label 将选择类label 的input 的兄弟姐妹（在DOM 树的下方）。 label 和 input 不是兄弟姐妹。如果是的话，label 在input 之前。你不能在 dom 树上选择元素，只能向下选择。
没有以前的兄弟选择器，也没有父选择器，所以你不能用纯 css 和你当前的 html 结构来做到这一点
在发布问题之前请进行更多研究。 You can check this out! This might help!

标签： html css

【解决方案1】：

请试试这个朴素的代码

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 1.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
  opacity: 1; 
	margin-left: 45px;  
	transition: all 1.5s ease-out; 
	-webkit-transform: rotate(720deg);   
	zoom: 1;
}

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

【讨论】：

【解决方案2】：

我希望这是您所需要的。但是当你没有重点输入时会出现问题。

我只是在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>

【讨论】：

你改变了html结构，你能不能做同样的事情，但给我的html结构保持不变？在我要开发的网站中，很难改变HTML结构
网上最简单的sn-p代码浮动placeHolder！ :)

【解决方案3】：

你可以在焦点上做到这一点。要检测实际输入，您需要 javascript。

.field {
  position: relative;
}

label {
  position: absolute;
  left: 0;
  top: 21px;
  transition: 0.2s ease all;
  font-size: 15px;
}

.input-text {
  position: absolute;
  left: 0;
  top: 20px;
}

input:focus + label {
  top: 0;
}

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

【讨论】：

嗯，这改变了他的 HTML 结构。
你改变了html结构，你能不能做同样的事情，但给我的html结构保持不变？在我要开发的站点中，很难改变HTML结构
@Cristi 恐怕这不是一个选择。要在触发输入时在 CSS 中操作标签，标签必须位于 HTML 中的输入后面。
那我们需要用javascript来解决问题吧？你能用javascript填写你的例子，以便我们得到我们想要的吗？

【解决方案4】：

我发布此答案是为了提供额外的解决方案。

您可以利用translateY 和scale 属性来实现该效果。

.field {
  position: relative;
  top: 50px;
}

.text {
  pointer-events: none;
  position: absolute;
  left: 5px;
  transition: transform .3s ease;
}

.input-text {
  color: white;
}

.input-text:focus+.text {
  transform: translateY(-18px) scale(0.88);
}

.input-text:focus {
  color: black;
}

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

【讨论】：

好的，但是如果输入有文本并且我在外面点击，标签会出现在文本上方。我们该如何处理这种情况？
更新了我的答案，看看吧。 @克里斯蒂
谢谢，但是现在当我在外面点击时文本被隐藏了。文本应保留在输入中:)
@Cristi 再次检查:)

【解决方案5】：

恐怕没有办法（据我所知）在css 中选择父元素，这里我们需要选择父元素div。所以我只是在父 div focused 的输入焦点上添加一点 jQuery。

我知道这不是您需要的完美解决方案，但这里我们只通过 jQuery 添加类。

$('input').focus(function(){
  $(this).parents('.field').addClass('focused');
});

$('input').blur(function(){
  var inputValue = $(this).val();
  if ( inputValue == "" ) {
    $(this).parents('.field').removeClass('focused');  
  } else {
    $(this).addClass('filled');
  }
})

.field{
  position: relative;
  display:inline-block;
}

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

.focused label{
  top: -10px;
  font-size:13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

【讨论】：

148/5000 是的，它是完美的，这个案例也必须在“focusout”上解决。此时如果删除文本，占位符会停留在上面，不会恢复到原来的形式
这是最佳答案

【解决方案6】：

希望对您有所帮助。

请尝试以下代码。

  .field{
  position: relative;
  margin-top:20px;
}
input:focus ~ label, input:not(:placeholder-shown) ~ label {
  top:-13px;
  font-size:12px;
background-color: white;
}
label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

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

【讨论】：