<!-- The HTML structure is based on the Bulma CSS Framwork -->
<section class="section">
  <div class="container is-small">
    <div class="columns is-centered">
      <div class="column is-6-desktop">
        <div class="box">
          <form class="form">
            <div class="field">
              <div class="control has-floating-label">
                <!-- By adding class="has-floating-label" the .control, 
adding class="with-floating-label" on the .input.is-medium
and adding class="is-floating-label" on the label which stands after the input, it should get the CSS for the floating label. 

                <!-- placeholder=" " is required -->
                <input class="input is-medium with-floating-label" id="email" placeholder=" " type="text" required>
                <label class="label is-floating-label" for="email">Email</label>


// Floating label with input height 60px
.control.has-floating-label {
  position: relative;

  // Focused state, when the :placeholder-shown is false
  .label.is-floating-label {
    font-weight: normal;
    position: absolute;
    line-height: 1;

  .input.is-medium {
    height: 3.75rem;
    transition-duration: 0.2s;
    // Non-focused state, placeholder is show.
    // Modern browser only
    &:placeholder-shown + .label.is-floating-label {
      color: #4b5370;
      display: block;
      top: 1.375rem;
      left: 0.75rem;
      z-index: 0;

    &:hover + .label.is-floating-label {
      z-index: 2;

    &:not(:placeholder-shown) {
      padding-top: 1.5rem;

      & + .label.is-floating-label {
        color: #1c2a3f;
        top: 0.5rem;
        left: 0.75rem;
        z-index: 11;

.field.has-addons .control.has-floating-label .input {
  position: static;
View Compiled

External CSS

  1. https://www.jsdelivr.com/package/npm/bulma
  2. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.