skip to Main Content

I want the placeholder to move to the top when the textbox is on focus and also while the user is typing.

I’m not sure if this is just html/css or any javascript too.

My current css looks like this, and I have no js code yet:

input:focus::-webkit-input-placeholder {
    font-size: .75em;
    position: relative;
    top: -15px; 
    transition: 0.2s ease-out;
}

input::-webkit-input-placeholder {
    transition: 0.2s ease-in;
}

input[type="text"]:focus, input[type="password"]:focus {
    height: 50px;
    padding-bottom: 0px;
    transition: 0.2s ease-in;
}

input[type="text"], input[type="password"] {
    height: 50px;
    transition: 0.2s ease-in;
}

It almost does the work but the placeholder disappears when I start typing. I’m using twitter-bootstrap, if that makes anything easier!

Thanks.

8

Answers


  1. That site isn’t moving the placeholder, but placing a div (.floating-label) over the input, so when the input is focused the div just animates to be over the input. The key part here is using pointer-events: none; in the floating div, so when you click it the event goes through it to the input box behind it.

    Login or Signup to reply.
  2. You could do it like this

    HTML:

    <div>
      <input type="text" class="inputText" />
      <span class="floating-label">Your email address</span>
    </div>
    

    CSS:

    input:focus ~ .floating-label,
    input:not(:focus):valid ~ .floating-label{
      top: 8px;
      bottom: 10px;
      left: 20px;
      font-size: 11px;
      opacity: 1;
    }
    
    .inputText {
      font-size: 14px;
      width: 200px;
      height: 35px;
    }
    
    .floating-label {
      position: absolute;
      pointer-events: none;
      left: 20px;
      top: 18px;
      transition: 0.2s ease all;
    }
    

    Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

    Login or Signup to reply.
  3. span{
      display:block;
      }
    input:focus::-webkit-input-placeholder { color:transparent; }
    input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
    input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
    input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    $(document).ready(function() {
      $('input').focus(function(){
        placeholder = $(this).attr('placeholder');
        if(placeholder != undefined){
          $(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>');
        }
      });
      $('input').blur(function(){
        $(this).parent().find('.input-placeholder').remove();
      });
    });
    </script>
    <div>
      <input type="text" class="inputText" placeholder="Email adress" required/>
    </div>
    Login or Signup to reply.
  4. .user-input-wrp {
    	position: relative;
    	width: 50%;
    }
    .user-input-wrp .inputText{
    	width: 100%;
    	outline: none;
    	border:none;
    	border-bottom: 1px solid #777;
     	box-shadow: none !important;
    }
    .user-input-wrp .inputText:focus{
    	border-color: blue;
    	border-width: medium medium 2px;
    }
    .user-input-wrp .floating-label {
    	position: absolute;
    	pointer-events: none;
    	top: 18px;
    	left: 10px;
    	transition: 0.2s ease all;
    }
    .user-input-wrp input:focus ~ .floating-label,
    .user-input-wrp input:not(:focus):valid ~ .floating-label{
    	top: 0px;
    	left: 10px;
    	font-size: 13px;
    	opacity: 1;
    }
    <h1>The floating label</h1>
    <div class="user-input-wrp">
      <br/>
      <input type="text" class="inputText" required/>
      <span class="floating-label">Your email address</span>
    </div>

    Modified the code from @user1846747 a little.

    Login or Signup to reply.
  5. Only using HTML and css

    .searchformfld{
        position: relative;
        margin: 5px 0px;
    }
    .searchformfld label{
        position: absolute;
        padding-left: 10px;
        top:15px;
        cursor: text;
    
    }
    .searchformfld input:focus + label,.searchformfld input:not(:placeholder-shown) + label{
        opacity:1;
        transform: scale(.9) translateY(-100%) translateX(-10px);
        color:#000;
    }
    .searchformfld input:focus{
        border:1px solid #000;
        outline-color: #000;
    }
    .searchformfld{
        padding: 15px;
        margin:15px 0px;
    }
    .searchformfld input{
        width:100%;
        padding-left: 10px;
    }
    .searchformfld label,.searchformfld input{
        transition: all 0.2s;
        transition-timing-function: ease;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        opacity:0.5;
    }
    <div class="searchformfld">
                <input type="text" class="candidateName" id="candidateName" name="candidateName" placeholder=" "/>
                <label for="candidateName">Candidate name</label>
            </div>
    Login or Signup to reply.
  6. if your Floating label is not working when required attribute is removed, try this: using input:not(:placeholder-shown)

    input:focus ~ .floating-label,
    input:not(:placeholder-shown) ~ .floating-label{
      top: 8px;
      bottom: 10px;
      left: 20px;
      font-size: 11px;
      opacity: 1;
    }
    
    .inputText {
      font-size: 14px;
      width: 200px;
      height: 35px;
    }
    
    .floating-label {
      position: absolute;
      pointer-events: none;
      left: 20px;
      top: 18px;
      transition: 0.2s ease all;
    }
    <div>
      <input placeholder="" type="text" class="inputText" />
      <span class="floating-label">Your email address</span>
    </div>
    Login or Signup to reply.
  7. You can try the below code. It only uses HTML and CSS and does not reply on Javascript or component libraries:

    .text-field {
            position: relative;
            margin: 10px 2.5px 20px 2.5px;
        }
    
    input {
            display: inline-block;
            border: thin solid #fafafa;
            border-bottom: solid medium #999;
            color: #444;
            background-color: #fafafa;
            padding: 10px 10px 10px 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
    
        input:focus {
                border: thin solid #32cd32;
                border-bottom: solid medium #32cd32;
                background-color:#fff;
            }
    
    label {
            color: #999;
            position: absolute;
            pointer-events: none;
            left: 10px;
            top: 10px;
            transition: 0.2s;
        }
    
    input:focus ~ label, input:valid ~ label {
            top: -10px;
            left: 15px;
            font-size: small;
            color: #32cd32;
            background-color:#fff;
            padding:0 5px 0 5px;
        }
    <div class="text-field">
                    <input type="text" required>
                    <label>Input field 1</label>
                </div>
    
                <div class="text-field">
                    <input type="text" required>
                    <label>Input field 2</label>
                </div>
    Login or Signup to reply.
  8. The solution I want to propose deals with an input with the movement of the placeholder without the need for the required attribute

    .inputField {
      position: relative;
    }
    
    .inputField input {
      padding: 8px 20px;
      padding-top: 18px;
      border: 1.8px solid rgba(107, 107, 107, 0.4);
      border-radius: 3px;
      width: 50%;
      color: black;
    }
    
    .inputField input:focus {
      border: 1.8px solid #6b6b6b;
      outline: none;
    }
    
    .inputField span {
      pointer-events: none;
      opacity: 0.5;
      position: absolute;
      padding-left: 20px;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      cursor: text;
    }
    
    .inputField input:focus+span,
    .inputField input:not(:placeholder-shown)+span {
      top: 7px;
      -webkit-transform: scale(0.7) translateY(-10%) translateX(-8.5px);
      transform: scale(0.7) translateY(-10%) translateX(-8.5px);
    }
    
    .inputField input,
    .inputField span {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
      transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    <div class="inputField">
      <input type="text" placeholder=" " />
      <span>Placeholder</span>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search