How to do floating of labels in CSS

Question

I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input's border.

Like so:

* {
  margin: 0;
  padding: 0;
}

form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  outline: 1px solid lightgrey;
  padding: 10px;
}

label, input[type='text'], input[type='password'] {
  font-size: 12pt;
  padding: 8px;
}

label {
  color: grey;
}

input {
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
}

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text"/>
  <br/>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"/>
  <br/>

  <input type="submit" value"login"/>
</form>

How can I achieve this with CSS?

With your html structure is hard or impossible, because each input is not wrapped into a box (to relativize positions) and the label is before the input, so when you target a focused input you can't go back to target the label. You need some javascript or change completely your html — Marcos Pérez Gude, Jul 11 '16 at 07:58

claudios · Answer 1 · 2016-07-12T00:06:06.997

This looks a lot like the Google new material design inputs.
I created custom inputs for you that look like what you are looking for.

.input-group {
  position: relative;
  margin: 40px 0 20px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

.bar {
  position: relative;
  display:block;
  width:315px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4285f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}

<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Username</label>
</div>

<div class="input-group">
  <input type="password" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Password</label>
</div>

Is it intetional that the blue highlight doesn't quite extend to the full width of the input? — Kyeotic, Jul 11 '16 at 16:58
@Tyrsius, Thanks for asking that. I edited my fiddle and also the code pasted here. check it out :) — claudios, Jul 12 '16 at 00:05
`:valid` fails, suppose we use this for an `input type='email'` and the user enters something that's not an email then the floating label doesn't stay there. — Deepak Kamat, Mar 13 '18 at 15:17
@executable adding styles for required or valid attributes needs some javascript to toggle class and it's out of the op's request. — claudios, May 17 '20 at 14:45
If using Razor ASP .NET MVC ensure required = "" is included in the control definition or the label won't float - @Html.TextBoxFor(m => m.Email, new { @class = "form-control", type = "text", required = "" }) — Malcolm Swaine, Apr 15 '21 at 05:16

Sagar Kodte · Answer 2 · 2017-12-23T07:00:04.613

Edited @23 Dec 2017

This will also help you. Considering your image i am asking you want to change text after click?

input {
  margin: 40px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

input:focus, input:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}


input::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
 color: #1abc9c;
 font-size: 11px;
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 visibility: visible !important;
}

<input placeholder="Username" type="text" required>
<input placeholder="Password" type="password" required>

After inputting some text the label above the textbox disappears. The other answer has that functionality. — Raidri, Jul 11 '16 at 11:22
@SagarKodte your code was the only one i got to function the way i wanted. Any tips on making the placeholder nor disappear when the user starts typing? — LuisSilva, Mar 14 '21 at 01:14

score 3 · Answer 3 · answered Dec 19 '18 at 15:05

Check this Tutorial Link

Demo Link

This is inspired by latest Gmail Login style

HTML

<div class="form-wrapper-outer">

    <div class="form-logo">
        <img src="https://www.freakyjolly.com/wp-content/uploads/2017/08/cropped-fjlogo2.png" alt="logo">
    </div>
    <div class="form-greeting">
        <span>It's nice to meet you.</span>
    </div>


    <div class="field-wrapper">
        <input type="email" name="email" id="">
        <div class="field-placeholder"><span>Enter your email</span></div>
    </div>
    <div class="field-wrapper">
        <input type="password" name="password" id="">
        <div class="field-placeholder"><span>Enter your password</span></div>
    </div>
    <div class="form-button">
        <button type="button" class="btn btn-primary">Login</button>
    </div>

</div>

CSS Style

    .field-wrapper{
        position: relative;
        margin-bottom: 15px;
    }

    .field-wrapper input{
        border: 1px solid #DADCE0;
        padding: 15px;
        border-radius: 4px;
        width: 100%;
    }

    .field-wrapper input:focus{
        border:1px solid #1A73E8;
    }

    .field-wrapper .field-placeholder{
        font-size: 16px;
        position: absolute;
        /* background: #fff; */
        bottom: 17px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #80868b;
        left: 8px;
        padding: 0 8px;
        -webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
        z-index: 1;

        text-align: left;
        width: 100%;
    }        

    .field-wrapper .field-placeholder span{
        background: #ffffff;
        padding: 0px 8px;
    }

    .field-wrapper input:not([disabled]):focus~.field-placeholder
    {
        color:#1A73E8;
    }
    .field-wrapper input:not([disabled]):focus~.field-placeholder,
    .field-wrapper.hasValue input:not([disabled])~.field-placeholder
    {
        -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
        transform: scale(.75) translateY(-39px) translateX(-60px);

    }

jQuery Event Listener

        $(".field-wrapper .field-placeholder").on("click", function () {
            $(this).closest(".field-wrapper").find("input").focus();
        });
        $(".field-wrapper input").on("keyup", function () {
            var value = $.trim($(this).val());
            if (value) {
                $(this).closest(".field-wrapper").addClass("hasValue");
            } else {
                $(this).closest(".field-wrapper").removeClass("hasValue");
            }
        });

score 2 · Answer 4 · answered Nov 02 '16 at 09:13

I Hope this will also help you.

The input animation happens when we add required attribute in it, this can be done without adding required attribute also.

HTML

    <div class="floating-label">      
      <input class="floating-input" type="text" placeholder=" ">
      <label>Text</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" ">
      <label>Time</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="text" onclick="(this.type='date')" placeholder=" ">
      <label>Date</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="password" placeholder=" ">
      <label>Password</label>
    </div>

    <div class="floating-label">  
      <select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
        <option value=""></option>
        <option value="1">Alabama</option>
        <option value="2">Boston</option>
        <option value="3">Ohaio</option>
        <option value="4">New York</option>
        <option value="5">Washington</option>
      </select>
      <label>Select</label>
    </div>

    <div class="floating-label">      
      <textarea class="floating-input floating-textarea" placeholder=" "></textarea>
      <label>Textarea</label>
    </div>

CSS

.floating-label { 
  position:relative; 
  margin-bottom:20px; 
}

.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:180px;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
}

.floating-input:focus , .floating-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}

label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 30px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

DEMO

Floating Label's - Pure CSS - without Required*

score 2 · Answer 5 · answered Dec 18 '18 at 14:29

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background: #fff;
  padding: 40px;
  border: 1px solid red;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.box input {
  padding: 10px 0;
  margin-bottom: 30px;
}

.box input {
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
  border: none;
  border-bottom: 2px solid #999;
}

.box form div {
  position: relative;
}

.box form div label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.5s;
  pointer-events: none;
}

.box input:focus~label,
.box input:valid~label {
  top: -12px;
  left: 0;
  color: red;
}

.box input:focus,
.box input:valid {
  border-bottom: 2px solid red;
}

<div class="box">
  <form>
    <div>
      <input type="text" name="" required="">
      <label>First Name</label>
    </div>
    <div>
      <input type="text" name="" required="">
      <label>Last Name</label>
    </div>
  </form>
</div>

Why not use the `form` tag directly for styling instead of wrapping it in a `div`? — Jonathan E. Landrum, May 12 '23 at 20:45

Jared Lethal · Answer 6 · 2019-01-24T14:42:34.460

Like @daniel-j-abraham i use the input:not(:placeholder-shown) ~ label method. You just need to set a placeholder=" " (with a space) to your inputs (see this pen for live example) it works just like the required method but it's way more convenient since it works also with non required fields.

i don't understand why this method isn't more used / upvoted ^^

CODE :

HTML :

<form class="contactForm">

        <div>
            <input id="contactName" value="" name="name" type="text" placeholder=" ">
            <label for="contactName">name</label>
        </div>
        <div>
            <input id="contactCompany" value="" name="company" type="text" placeholder=" ">
            <label for="contactCompany">company</label>
        </div>
          <div>
            <input id="contactPosition" value="" name="position" type="text" placeholder=" ">
            <label for="contactPosition">position</label>
        </div>
  <div>

        <button type="submit" class="submit">Send</button>
    </form>

CSS:

/*basic styling */
.contactForm {
  text-align: center;
  margin: auto;
  width: 300px;
  padding-top: 15px
}
.contactForm > div {
  position: relative;
  width: 100%;
}
.contactForm > div input {
  width: 100%;
  height: 42px;
  margin: 10px;
  border: none;
  border-bottom: 2px solid #eee;
  border-left: 2px solid #eee;
  padding: 0 10px;
  transition: all .3s ease;
  outline: none !important;
}
.contactForm > div label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 20px;
  transition: all .3s ease;
}
.contactForm > div input:focus {
  border-color: #ff6291;
}
.contactForm > div input:not(:placeholder-shown) {
  border-color: #26e9b9;
}
/* END of basic styling*/

  /*************************************************/
 /*     NOW that's the part that interests us     */
/*************************************************/

/* label goes up when input is focused OR filled */
.contactForm > div input:focus ~ label,
.contactForm > div input:not(:placeholder-shown) ~ label {
  font-size: 12px;
  transform: translateY(-30px);
}

/* label color on focused state */
.contactForm > div input:focus ~ label {
  color: #ff6291;
}

/* label color on filled state */
.contactForm > div input:not(:placeholder-shown) ~ label {
  color: #26e9b9;
}

/* button styling */
.submit {
  color: #fff!important;
  background-image: linear-gradient(to right,#ff017d 0,#ff7f78 40%,#fff 50%,#26e9b9 60%,#44c0ff 100%)!important;
  background-size: 300% 200%!important;
  background-position: -1px 0;
  transition: background-position .3s;
  border: none!important;
  border-radius: 50px;
  padding: 10px 42px;
  text-transform: uppercase;
}

.submit:hover {
    background-position: 95% 0 !important;
    cursor: pointer;
}

Having a blank `placeholder` is probably bad for accessibility. — Jonathan E. Landrum, May 12 '23 at 20:59

How to do floating of labels in CSS

6 Answers6

CODE :

Linked