父元素下的伪元素

Question

我有一个带有浮动标签的输入字段。我的每个字段的HTML都是：

<div class="input-container">
    <input placeholder="Email" type="text" name="email" id="email">
    <label for="email">Email:</label>
</div>

在我的CSS中，我添加了规则，以便在输入字段的焦点处以及不再显示占位符的情况下，将标签显示在输入字段的中间。填写字段时的外观如下： 只要输入字段被聚焦，带有以下scss的输入框上就会出现框阴影：

input {
  position: relative;
  background: #fff;
  display: block;
  z-index: 2;

  &:focus {
    border: solid 1px $primary;
    box-shadow: 0 0 3px 2px rgba($primary, .8);
  //....
  }

我希望在标签的上半部显示相同的阴影，这样它将在白色遇到较暗的颜色的任何地方都显示出来。我的想法是创建一个伪元素，该伪元素的高度为标签高度的一半，并且z-index低于标签和输入字段的z-index。我是通过添加到&:focus：

& ~ label {
  background-color: white;
  z-index: 3;

  &:before {
    content: "";
    width: 100%;
    height: .5em;
    border: solid 1px $primary;
    box-shadow: 0 0 3px 2px rgba($primary, .8);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

尽管关注的结果是伪元素位于一切之上，但在我的标签之上蒙上了阴影：

已阅读this question和this question的过程中，我尝试设置z索引并创建包装器，但未成功。即使伪元素的z-index设置为-1，它仍会显示在其他所有元素之上。如何确保伪元素在我的标签和输入字段下方？这也是JSFiddle。

Answer 1

只有两项更改

height: 1em;
box-shadow: -2px -4px 2px 0px rgba(95, 190, 237, 0.8), 2px -4px 2px 0px rgba(95, 190, 237, 0.8);

阴影可以多次添加到盒子阴影中

.form-float {
  display: block;
  padding: 40px 30px;
  background: #696966;
  padding-bottom: 20px;
  color: white;
  border-radius: 0.25rem;
}

.form-float .input-container {
  position: relative;
  margin-bottom: .9em;
}

.form-float .input-container label {
  position: absolute;
  color: #696966;
  top: calc(50% - 1em);
  left: 0.75em;
  padding: 0 0.4em;
  opacity: 0;
  transition: all .3s ease;
  z-index: 2;
}

.form-float .input-container input:not(:placeholder-shown)+label {
  transform: translateY(-1.25em) translateX(-0.25em);
  line-height: 1;
  opacity: 1;
}

.form-float label {
  font-size: 0.75em;
  background-color: white;
}

.form-float button {
  width: 100%;
  text-align: center;
  padding: calc(0.4em + 2px) 1.6em;
  margin-top: 5px;
  background-color: #5fbeed;
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
  border: none;
}

.form-float button:hover {
  background-color: #48b5ea;
}

.form-float button:hover:active {
  transform: scale(0.99);
}

.form-float input {
  position: relative;
  font-size: 1em;
  padding: 0.4em 0.75em;
  margin-bottom: 0.2em;
  border: solid 1px rgba(0, 0, 0, 0);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: all .25s linear;
  color: #000;
  display: block;
  z-index: 2;
}

.form-float input:focus {
  border: solid 1px #5fbeed;
  outline: none !important;
  box-shadow: 0 0 3px 2px rgba(95, 190, 237, 0.8);
}

.form-float input:focus~label {
  background-color: white;
  z-index: 3;
}

.form-float input:focus~label:before {
  content: "";
  width: 100%;
  height: 1em;
  box-shadow: -2px -4px 2px 0px rgba(95, 190, 237, 0.8), 2px -4px 2px 0px rgba(95, 190, 237, 0.8);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.form-float input[type=checkbox] {
  position: static;
  display: inline;
  transition: none;
  width: auto;
}

.form-float input[type=checkbox]:focus {
  border: none;
  box-shadow: none;
}

.form-float input[type=checkbox]~label {
  position: static;
  display: inline;
  font-size: .85em;
  color: white;
  background-color: transparent;
  transform: none;
  opacity: .85 !important;
  border: none;
  box-shadow: none;
}

.form-float input[type=checkbox]~label:before {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

<br><br>
<div class="col-12 col-sm-8 col-md-6 col-lg-4">
  <form action="" class="form-float">

    <div class="input-container">
      <input placeholder="Email" type="text" name="email" id="email">
      <label for="email">Email:</label>
    </div>

    <div class="input-container">
      <input placeholder="Password" type="password" name="password" id="password">
      <label for="password">Password:</label>
    </div>

    <button type="submit" onClick="return false;">Log in</button>
  </form>
</div>

第二种解决方案，删除所有z-index

.form-float {
  display: block;
  padding: 40px 30px;
  background: #696966;
  padding-bottom: 20px;
  color: white;
  border-radius: 0.25rem;
}

.form-float .input-container {
  position: relative;
  margin-bottom: .9em;
}

.form-float .input-container label {
  position: absolute;
  color: #696966;
  top: calc(50% - 1em);
  left: 0.75em;
  padding: 0 0.4em;
  opacity: 0;
  transition: all .3s ease;
}

.form-float .input-container input:not(:placeholder-shown)+label {
  transform: translateY(-1.25em) translateX(-0.25em);
  line-height: 1;
  opacity: 1;
}

.form-float label {
  font-size: 0.75em;
  background-color: white;
}

.form-float button {
  width: 100%;
  text-align: center;
  padding: calc(0.4em + 2px) 1.6em;
  margin-top: 5px;
  background-color: #5fbeed;
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
  border: none;
}

.form-float button:hover {
  background-color: #48b5ea;
}

.form-float button:hover:active {
  transform: scale(0.99);
}

.form-float input {
  position: relative;
  font-size: 1em;
  padding: 0.4em 0.75em;
  margin-bottom: 0.2em;
  border: solid 1px rgba(0, 0, 0, 0);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  transition: all .25s linear;
  color: #000;
  display: block;
}

.form-float input:focus {
  border: solid 1px #5fbeed;
  outline: none !important;
  box-shadow: 0 0 3px 2px rgba(95, 190, 237, 0.8);
}

.form-float input:focus~label {
  background-color: white;
}

.form-float input:focus~label:before {
  content: "";
  width: 100%;
  height: 1em;
  box-shadow: -2px -4px 2px 0px rgba(95, 190, 237, 0.8), 2px -4px 2px 0px rgba(95, 190, 237, 0.8);
  position: absolute;
  left: 0;
  top: 0;
}

.form-float input[type=checkbox] {
  position: static;
  display: inline;
  transition: none;
}

.form-float input[type=checkbox]:focus {
  border: none;
  box-shadow: none;
}

.form-float input[type=checkbox]~label {
  position: static;
  display: inline;
  font-size: .85em;
  color: white;
  background-color: transparent;
  transform: none;
  opacity: .85 !important;
  border: none;
  box-shadow: none;
}

.form-float input[type=checkbox]~label:before {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<br><br>

<div class="col-12 col-sm-8 col-md-6 col-lg-4">
  <form action="" class="form-float">

    <div class="input-container">
      <input placeholder="Email" type="text" name="email" id="email">
      <label for="email">Email:</label>
    </div>

    <div class="input-container">
      <input placeholder="Password" type="password" name="password" id="password">
      <label for="password">Password:</label>
    </div>

    <button type="submit" onClick="return false;">Log in</button>
  </form>
</div>