输入样式仅适用于类型=＆＃34;文本＆＃34;

Question

当我的所有输入都设置为＆＃34; text＆＃34;它很漂亮。

示例： https://jsfiddle.net/beckah/62oozn3t/

但是当我有其他HTML5输入元素时，例如tel或email，我的标签在输入字段后拒绝浮动，而不是激活另一个字段。要进行测试，请输入＆＃34;电子邮件＆＃34;输入然后选择另一个输入和类型。你会看到标签一旦不活动就不会继续浮动

示例： https://jsfiddle.net/beckah/8zpd5n46/1/

非常感谢任何帮助。 谢谢。

Answer 1

正如评论中所指出的那样，您的问题在于此代码部分中您的css上的:valid选择器，以及其他一些地方。

input.question:focus,
input.question:valid {
  padding-top: 35px;
}

由于您使用的是:valid选择器，并且您的电子邮件或电话在某些情况下无效，因此会崩溃，而对于您的文字输入，只要它不是空的，它就不会再次崩溃

如果您不想完成编写JavaScript的所有麻烦，可以将其作为普通文本输入，并且不会拥有@和.com键可在移动设备上使用，但它可以按设计使用。

要完全解决此问题，您应该通过JavaScript检查input，因为CSS无法查看textarea或input是否包含文字。您可以通过基本检查以查看输入的value是否为空来执行此操作，如果不是，请使用getElementById().style.padding = "35px";

通过javascript调整css样式

对不起，没有简单的解决方案，但CSS还没有像这样的输入。