Html 材料设计形状误差

我正在从事HTML表单的材料设计。我不希望

必填

输入文本字段。但我的材料设计只有在输入具有

必需属性时才有效。我已尝试将css从
：valid
更改为
：not（：focus）
，
：invalid
，
：optional
，但它不起作用

问题：
如果我在输入字段中输入，标签将转到顶部，在输入内容后，当我离开输入字段时，标签将回到其初始位置。我不希望标签在输入后回到原来的位置。只有在键入后，标签才应位于顶部

这是我的表格：


.form行{
位置：相对位置；
边缘顶部：30px；
}
.表格标签{
位置：绝对位置；
顶部：17px；
左：20px；
颜色：#999；
光标：文本；
过渡：所有的.15秒都在0秒内变慢；
-webkit过渡：所有.15秒都可以轻松地从0秒变为0秒；
-moz转换：所有.15秒都可从0秒变为0秒；
-ms转换：所有.15秒均为0秒；
-o型过渡：所有.15秒均为0秒进0秒出；
}
.表格文本框，
.表格提交{
宽度：100%；
填充：20px；
}
.form文本框：焦点~.form标签，
.表格标签：在{
顶部：10px；
左：12px；
字体大小：10px；
颜色：继承；
光标：指针；
}

测试
您可以为预期功能编写一些自定义javascript。
@Khushbu Vaghela，我已经根据您的需要更新了一点css和javascript


函数hideLabel（）{
txtEmail=document.getElementById（'form-email'）
lblEmail=document.getElementsByCassName（'form-label'）[0]
如果（txtEmail.value！=''）{
lblEmail.classList.add（“表单标签内容”）；
}否则{
lblEmail.classList.remove（“表单标签内容”）；
lblEmail.innerText='测试'；
}
}
.form行{
位置：相对位置；
边缘顶部：30px；
}
.表格标签{
位置：绝对位置；
顶部：17px；
左：20px；
颜色：#999；
光标：文本；
过渡：所有的.15秒都在0秒内变慢；
}
.表格文本框，
.表格提交{
宽度：100%；
填充：20px；
}
.form文本框：焦点~.form标签{
顶部：10px；
左：12px；
字体大小：10px；
颜色：继承；
光标：指针；
}
.form文本框：非（：焦点）~.form标签内容{
顶部：10px；
左：12px；
字体大小：10px；
颜色：继承；
光标：指针；
}

测试
就像Siddaram H说的那样，你可以用一个简单的js函数来完成。但如果您希望它始终可见，请在类中转换
。form textbox:focus
。edited

if（txtEmail.value！=''）{
lblEmail=document.getElementsByCassName（'form-label'）[0]
lblEmail.classList.add（'edited'）；
}

。已编辑{
顶部：10px；
左：12px；
字体大小：10px；
颜色：继承；
光标：指针；
}

您可以使用

：valid

-pseudo类检查输入字段是否包含文本

编辑：对不起，我只是仔细阅读了你的问题

.form行{
位置：相对位置；
边缘顶部：30px；
}
.表格标签{
位置：绝对位置；
顶部：17px；
左：20px；
颜色：#999；
光标：文本；
过渡：所有的.15秒都在0秒内变慢；
}
.表格文本框，
.表格提交{
宽度：100%；
填充：20px；
}
.form文本框：焦点~.form标签，
.form文本框：有效~.form标签，
.表格标签：在{
顶部：10px；
左：12px；
字体大小：10px；
颜色：继承；
光标：指针；
}

测试

Required field仅帮助检查它是否有效，您需要验证文本框，否则您必须使用javascript。感谢您的回答。我不想隐藏标签，我希望它在离开输入后位于顶部。键入并离开字段后，您能帮我将标签置于顶部吗@Siddaram HThank非常感谢您的回复，但我希望它能在IE中发挥作用。我会尝试一下，并会发送反馈。谢谢：）检查您的代码，可能与另一个类冲突或更改lblEmail=document.getElementsByClassName（'form-label'）[0]；by lblEmail=document.querySelector（“.form label”）；