Question

您能帮我这个忙吗，我不知道怎么了。输入“ 姓氏”已成功required。

（1）当我在“邮件”输入上应用“必填”，“模式”时，标签不占据焦点位置。

（2）应用“模式”，不应用“必填，标签开始时不保持位置。我附加了图像，可以更清楚地看到explanation img

https://codepen.io/quang-dang/pen/BOgBNM

<form class="wrapper">
  <div class="field">
    <input type="text" id="fullName" name="fullName" required>
    <label for="fullName">Full Name(*)</label>
    <span class="bar"></span>
  </div>
  <div class="field">
    <input type="mail" id="mail" name="mail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required>
    <label for="mail">Email(*)</label>
    <span class="bar"></span>
  </div>
  <div class="field">
    <input type="text" id="phoneNumber" name="phoneNumber" pattern="[0-9]+">
    <label for="phoneNumber">Phone number</label>
    <span class="bar"></span>
  </div>
  <div class="field">
    <input type="text" id="message" name="message">
    <label for="message">Message</label>
    <span class="bar"></span>
  </div>
  <button typy="sumbit">Submit</button>
</form>

/*
* LAYOUT
*/
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrapper {
  max-width: 800px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
/*
* FIELD > INPUT
*/
.field {
  position: relative;
  max-width: 300px;
  margin-bottom: 30px;
}
.field input,
.filed input:empty {
  width: 100%;
  border: none;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  outline: none;
  padding: 6px 0;
  transition: all 0.2s ease;
}
.field input:focus {
  border-color: transparent;
}
.field label,
.field input:empty ~ label {
  position: absolute;
  top: 50%;
  left: 5px;
  font-size: 16px;
  color: #999;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}
.field input:focus ~ label,
.field input:valid ~ label {
  top: 0px;
  left: 0;
  font-size: 12px;
  color: #333;
}
/*
* FIELD > BAR
*/
.field .bar {
  display: flex;
  /*Start animation at center*/
  justify-content: center;
}
.bar:before,
.bar:after {
  content: "";
  height: 2px;
  width: 0;
  background: #3498db;
  transition: all 0.2s ease;
}
.field .bar:before {
  left: 50%;
}
.filed .bar:after {
  right: 50%;
}
.field input:focus ~ .bar:before,
.field input:focus ~ .bar:after {
  width: 50%;
}

Answer 1

<form class="wrapper">
   <div class="field">
            <input type="text" id="fullName" name="fullName"   required>
            <label for="fullName">Full Name(*)</label>
            <span class="bar"></span>
</div>
     <div class="field">
            <input type="text" id="Email" name="Email"   required>
            <label for="Email">Email(*)</label>
            <span class="bar"></span>
    </div>

    <div class="field">
       <input type="text" id="phoneNumber" name="phoneNumber" pattern="[0-9]+">
       <label for="phoneNumber">Phone number</label>
       <span class="bar"></span>
    </div>
   <div class="field">
      <input type="text" id="message" name="message">
      <label for="message">Message</label>
      <span class="bar"></span>
   </div>
   <button typy="sumbit">Submit</button>
</form>

应用“必需”和“模式”属性时，输入不起作用

1 个答案: