Html 如何修复与输入文本重叠的输入占位符？

我创建了一个简单的表单，并想用谷歌的材料设计来设计它。但是，占位符文本会妨碍输入的文本，如下面的屏幕截图所示。如果您能帮助我解决这个问题，以及如何解决这个问题，我将不胜感激

代码如下：

@导入url(https://fonts.googleapis.com/css?family=Raleway:400,700);
身体{
显示器：flex；
高度：100vh；
证明内容：中心；
对齐项目：居中；
背景：#c0392b；
字体系列：雷威；
颜色：白色；
字母间距：1px；
}
#formreg{
宽度：250px；
背景：#fff；
边框：1px实心#ebebebeb；
盒影：027px55px0rgba（0,0,0,3），017px17px0rgba（0,0,0,15）；
}
#形体{
填料：1米2米1米2米；
}
#格式标题{
宽度：100%；
边缘底部：2米；
填充：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：50px；
字体大小：20px；
字体大小：粗体；
背景：#eee；
边界半径：0；
}
#formbody#组1输入，
#formbody#组2输入，
#formbody#组3输入{
字体大小：15px；
填充：10px 10px 10px 5px；
-webkit外观：无；
显示：块；
背景：#fff；
颜色：#636363；
宽度：95%；
边界：无；
边界半径：0；
边框底部：1px实心#999；
}
#formbody#group1输入：焦点，
#formbody#group2输入：焦点，
#formbody#group3输入：焦点{
大纲：无；
}
/*标签*/
#formbody#group1标签，
#formbody#group2标签，
#formbody#组3标签{
颜色：#999；
字体大小：15px；
字体大小：正常；
位置：绝对位置；
指针事件：无；
左：5px；
顶部：10px；
过渡：所有。2轻松；
}
/*活跃的*/
#formbody#group1输入：focus~label，
#formbody#group1 input.used~标签，
#formbody#group2输入：focus~label，
#formbody#group2 input.used~标签，
#formbody#group3输入：focus~label，
#formbody#group3 input.used~标签{
顶部：-20px；
变换：比例（.75）；
左：-2px；
/*字体大小：14px*/
颜色：#4a89dc；
}
/*下划线*/
.酒吧{
位置：相对位置；
显示：块；
宽度：100%；
}
巴尔：以前，
.bar：：之后{
内容：''；
高度：2倍；
宽度：0；
底部：1px；
位置：绝对位置；
背景：#4a89dc；
过渡：所有。2轻松；
}
酒吧：以前{
左：50%；
}
.bar:：之后{
右：50%；
}
/*活跃的*/
#formbody#group1输入：focus~。栏：before，
#formbody#group1输入：focus~。栏：之后，
#formbody#group2输入：focus~。栏：before，
#formbody#group2输入：焦点~。栏：之后，
#formbody#group3输入：focus~。栏：before，
#formbody#group3输入：焦点~。栏：之后{
宽度：50%；
}
/*突出显示*/
.亮点{
位置：绝对位置；
身高：60%；
宽度：100px；
最高：25%；
左：0；
指针事件：无；
不透明度：.5；
}
/*活跃的*/
#formbody#group1输入：focus~。突出显示，
#formbody#group2输入：focus~。突出显示，
#formbody#group3输入：focus~。突出显示{
动画：inputHighlighter 0.3s轻松；
}
@Puthighlighter中的关键帧{
从{
背景：#4a89dc；
}
到{
宽度：0；
背景：透明；
}
}
/*钮扣*/
.按钮{
位置：相对位置；
显示：内联块；
填充：12px 24px；
边距：3em 0 0em 0；
宽度：100%；
垂直对齐：中间对齐；
颜色：#fff；
字体大小：16px；
线高：20px；
-webkit字体平滑：抗锯齿；
文本对齐：居中；
字母间距：1px；
背景：透明；
边界：0；
边框底部：2个实心#3160B6；
光标：指针；
过渡：全部。15秒轻松；
}
.按钮：焦点{
大纲：0；
}
/*按钮修改器*/
.钮扣蓝{
背景：#4a89dc；
文本阴影：1px1p0RGBA（39110204.5）；
}
.按钮蓝色：悬停{
背景：357bd8；
}
/*波纹容器*/
.涟漪{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景：透明；
}
/*涟漪圈*/
.涟漪圈{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：0；
宽度：0；
身高：0；
边界半径：50%；
背景：rgba（255、255、255、25）；
}
.ripples.is-active.ripplesCircle{
动画：涟漪。4s放松；
}
/*涟漪动画*/
@关键帧涟漪{
0% {
不透明度：0；
}
25% {
不透明度：1；
}
100% {
宽度：200%；
垫底：200%；
不透明度：0；
}
}
.橙色文本{
颜色：#fd7b1b；
}
.蓝色文本{
颜色：#1e73be；
}
.组{
位置：相对位置；
边缘底部：45像素；
}
.规则{
高度：2倍；
背景：#e8ebed；
利润率：0px 35px；
}

注册帐户信息
名称
电子邮件
电话号码
提交

您可以使用本机支持的

占位符属性，而不是使用span作为占位符文本

<input placeholder='Enter your placeholder text here' />



这里有一个快速提示。
您可以使用本机支持的
占位符属性，而不是使用span作为占位符文本

<input placeholder='Enter your placeholder text here' />



这里有一个简短的问题。
我已经回答了一个类似的问题

这里您需要的是一个
：empty
选择器和
：valid
选择器，以使占位符的转换在所有情况下都有效-但遗憾的是
：empty
将不适用于
input

因此，您必须在此处使用一些JS：

$("input").each(function() {
  var $this = $(this);
  // add empty class on initial run
  if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  // add empty class on input change
  $this.on("change", function() {
    if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  });
});

如果输入框为空，将添加
输入空
。然后你需要这个CSS来配合它：

/* not empty but valid */

#formbody #group1 input:not(.input-empty):valid ~ label,
#formbody #group2 input:not(.input-empty):valid ~ label,
#formbody #group3 input:not(.input-empty):valid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but invalid */

#formbody #group1 input:not(.input-empty):invalid ~ label,
#formbody #group2 input:not(.input-empty):invalid ~ label,
#formbody #group3 input:not(.input-empty):invalid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: red;
}

希望你能从这里开始。让我知道你对此的反馈。干杯


$（“输入”）。每个（函数（）{
var$this=$（this）；
如果（$（this）.val（）.trim（）==“”）{
$（this）.addClass（“输入为空”）；
}否则{
$（this）.removeClass（“输入为空”）；
}
$this.on（“更改”，函数（）{
如果（$（this）.val（）.trim（）==“”）{
$（this）.addClass（“输入为空”）；
}否则{
$（this）.removeClass（“inpu
let input = $("input[name=file_name]");
input.trigger('focus').val("any-value");