为什么我的元素在 html 和 css 中的行为不一样，即使它们具有相同的类？

Question

我正在尝试为此网站制作预订表格。两个元素（姓名和电子邮件）具有相同的类并且位于相同的 div 下。 “姓名”和“电子邮件”一词覆盖了整个框，当我开始输入时，它们应该向上过渡并停留在那里，但是即使我在输入框中输入了一些内容，电子邮件似乎也会下降。 input:focus~label 是改变它的那个。这是我的代码：

HTML：

        <div class="wrapper">
            <div class="formbox">
                <h2>Book A Table</h2>
                <form action="#">
                    <div class="inputbox">
                        <span class="icon">
                            <ion-icon name="person-outline"></ion-icon>
                        </span>
                        <input type="Full Name" required>
                        <label>Full Name</label>
                    </div>
                    <div class="inputbox">
                        <span class="icon">
                            <ion-icon name="mail-outline"></ion-icon>
                        </span>
                        <input type="Email" required>
                        <label>Email</label>
                    </div>
                </form>
            </div>
        </div>

CSS：

.wrapper {
    position: relative;
    width: 500px;
    height: 600px;
    background: transparent;
    border: 2px solid rgba(225,225,225,0.5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}


.inputbox {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #fff;
    margin: 30px 0;
}

h2 {
    text-align: center;
    padding-bottom: 10px;
    width: 300px;
}

.inputbox label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-weight: bold;
    pointer-events: none;
    transition: 0.5s;
}

.inputbox input:focus~label,
.inputbox input:valid~label {
    top: -4px;
}

.inputbox input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;`your text`your text``
    font-weight: bold;
    padding: 0 35px 0 5px;
}

.inputbox .icon {
    position: absolute;
    right: 8px;
    line-height: 57px;
}

Answer 1

由于使用电子邮件输入字段且未填写有效模式，您遇到了问题。下面是这个问题的解决方案：

.inputbox input:focus~label,
.inputbox input:valid~label,
.inputbox input:not(:placeholder-shown)~label {
    top: -4px;
}
.inputbox input:invalid {
  color: red;
}

小心。此外，我还通过更改类型和添加占位符来修改输入字段。这是一个完整的例子：

.wrapper {
  position: relative;
  width: 500px;
  height: 600px;
  background: transparent;
  border: 2px solid rgba(225, 225, 225, 0.5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}


.inputbox {
  position: relative;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #fff;
  margin: 30px 0;
}

h2 {
  text-align: center;
  padding-bottom: 10px;
  width: 300px;
}

.inputbox label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-weight: bold;
  pointer-events: none;
  transition: 0.5s;
}

.inputbox input:focus~label,
.inputbox input:valid~label,
.inputbox input:not(:placeholder-shown)~label {
  top: -4px;
}

.inputbox input:invalid {
  color: red;
}

.inputbox input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  padding: 0 35px 0 5px;
}

.inputbox .icon {
  position: absolute;
  right: 8px;
  line-height: 57px;
}

<div class="wrapper">
  <div class="formbox">
    <h2>Book A Table</h2>
    <form action="#">
      <div class="inputbox">
        <span class="icon">
          <ion-icon name="person-outline"></ion-icon>
        </span>
        <input type="text" placeholder="" required>
        <label>Full Name</label>
      </div>
      <div class="inputbox">
        <span class="icon">
          <ion-icon name="mail-outline"></ion-icon>
        </span>
        <input type="email" placeholder="" required>
        <label>Email</label>
      </div>
    </form>
  </div>
</div>