активная форма ввода - появляется метка - чистый css раствор

Question

Я создаю простую форму в css, и мне было интересно, есть ли способ использовать css, не добавляя javascript или jquery добавление класса.

Когда я набираю форму в элементе ввода, я хочу, чтобы метка появлялась, и я хочу, чтобы она появлялась, когда пользователь вводит данные, и исчезала, когда их нет.

До сих пор я думал использовать псевдокласс: active для элемента ввода, а затем установить непрозрачность и переход к элементу метки. но не уверен, как соединить эти два только с чистым добавлением класса css, а не js или jquery.

  <section class="section-book">
      <div class="row">
        <div class="book">
          <div class="book__form">
            <div class="u-margin-bottom-medium">
              <h2 class="heading-secondary">
                Start booking now
              </h2>
            </div>
            <form action="#" class="form">
              <div class="form-group">
                <input type="text" class="form__input" placeholder="Full Name" required>
                <label for="name" class="form__label">Full name</label>
              </div>
              <div class="form__group">
                <input type="email" class="form__input" placeholder="Full Name" required>
                <label for="email" class="form__label">Email address</label>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

Answer 1

Попробуйте селектор брата , https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator:

  label{
    opacity:0;
  }
  input:focus ~ label{
    opacity:1;
    transition:all ease-in 300ms;
  }

Демо: https://jsfiddle.net/L38u2tvm/