Question

我正在使用以下source在我的网站上创建一些漂亮的表单。

如果您查看现场演示，请转到标题为＆＃34; yoko＆＃34;的表单。你会看到，一旦你填写输入框，它应该保持打开状态，你应该能够看到你输入的文本。

当我使用这个源时，它会在我单击文本框时打开，但是即使填写了表单，表单也会崩溃，这是不应该的。

在演示文稿中单击文本框并填写时，该span元素的类名来自＆＃34;输入输入 - minoru＆＃34; to＆＃34;输入输入 - minoru输入 - 填充＆＃34;。当我使用来自源的css和javascript文件时，当我单击并键入它们时表单正确打开，但它们不会保持打开状态，并且类标题不会更改为＆＃34;输入输入 - minoru输入--filled＆＃34 ;.

在我的header.php中，我按以下顺序查看所有css文件：

<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/normalize.css" >
<link type="text/css" rel="stylesheet" href="css/component.css" >
<link type="text/css" rel="stylesheet" href="css/style2.css" >

在我的index.php中，我有以下代码：

<section class="test">
  <div class="container">
    <div class="row">
      <span class="input input--minoru">
          <input class="input__field input__field--yoko" type="text" id="input-1" />
          <label class="input__label input__label--yoko" for="input-1">
              <span class="input__label-content input__label-content--yoko">First Name</span>
          </label>
      </span>
    </div>
    <div class="row">
      <span class="input input--yoko">
          <input class="input__field input__field--yoko" type="text" id="input-1" />
          <label class="input__label input__label--yoko" for="input-1">
              <span class="input__label-content input__label-content--yoko">Last Name</span>
          </label>
      </span>
    </div>
  </div>
</section>

在index.php的最后，我按此顺序调用javascript文件：

  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script type="text/javascript" src="js/script.js"></script>

这些样式都在应用，所以我知道css至少是正确的样式，但它没有正确地执行正确的::before and ::after功能。

JSFiddle我在说什么

如果您在表单中输入内容，然后离开输入区域，则框会再次折叠。什么时候应该熬夜。

我没有包含.js文件，但是classie.js附带了源代码，并且我们在index.php中按照上面的说明对它们进行了排序

使用第三方文件时，css规则不适用

0 个答案: