pseudo-element below its parent(s)

Question

I have an input fields with floating labels. My HTML for each field is:

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

In my css I added rules so that the labels are shown half-way on top of the input fields on focus of the input field, and when a placeholder is no longer shown. This is what it looks like when the fields are filled out: Whenever an input field is focused, a box shadow is visible on the input field with the following 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);
  //....
  }

I wish to show the same shadow on the top-half of my label so it would show everywhere the white color meets the darker color. My idea was to create a pseudo-element that is half the height of the label, with a lower z-index than both the label and the input field. I did this by adding to the &: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;
  }

Though the result on focus is that the pseudo-element is on top of everything, casting a shadow on top of my label:

Having read this question and this question I tried setting z-indexes and creating a wrapper, but without success. Even though the z-index for the pseudo-element is set to -1, it still appears on top of everything else. How to make sure the pseudo-element is below my label and input field? Here is also a JSFiddle.

Grzegorz T. · Answer 1 · 2019-10-05T18:02:16.643

Only two changes,

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

Shadow can be added to box-shadow several times

.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>

Second solution, removing all 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>

although the result comes close to what I am looking for, this isn't really the solution I am looking for. The element is still on top of the rest of the elements... — Dirk J. Faber, Oct 05 '19 at 17:19
I don't understand something, you can remove z-index from all elements and it will still work. In this case, z-index is not needed. I added a second solution without z-index. — Grzegorz T., Oct 05 '19 at 18:02
That's the whole problem, the z-index is ignored and the element is still on top of everything else. — Dirk J. Faber, Oct 05 '19 at 19:00

pseudo-element below its parent(s)

1 Answers1