CODEWITHSUNDEEP
htmlcss
iyal
iyal

Reputation: 1285

hide placeholder with css

I'm working with a responsive theme. And I'm facing the input form problem here. In the desktop view, the input will not have placeholder but have label.

However, when it comes to the mobile view, I will hide this input label and change this label with placeholder.

<input name="name" type="text" placehoder="insert your name">

How can one hide this placeholder with CSS?

Upvotes: 70

Views: 170602

Answers (8)

Jose Pariona
Jose Pariona

Reputation: 31

For me these two worked fine. Remember this is just making placeholder non visual.

Method 1:

::-webkit-input-placeholder {        
    color: transparent; 
}

Method 2:

::placeholder { 
    color: transparent; 
}

Upvotes: 1

Deepak Sharma
Deepak Sharma

Reputation: 4170

CSS only provides the styling, it can not remove the actual placeholder.

What you can do it, set the placeholder text color as your background color of textbox, so it will look like you don't have placeholder..

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}

Check the fiddle

Upvotes: 28

MaZzIMo24
MaZzIMo24

Reputation: 207

This Code/css shows the 'placeholder' only on focus:

:not(:focus)::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}
:not(:focus):-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
:not(:focus)::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}
:not(:focus):-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

Upvotes: 3

Luca Fagioli
Luca Fagioli

Reputation: 13349

This will hide the placeholder only for desktops (and large tablets):

@media (min-width:1025px) and (min-width:1281px) {
     ::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     input::placeholder {
         color: transparent;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     textarea::placeholder {
         color: transparent;
    }
}

Check it on Codepen.

Upvotes: 81

J.K
J.K

Reputation: 1374

<input name="name" type="text" id="id_here" placeholder="Your Label">

Make the placeholder hide in desktop view

input::-moz-placeholder {
  opacity: 0;
 }

OR

input::-moz-placeholder {
   color:white;
}
  1. Change input(or textarea whatever) to #id_here or class name, if you dont want to change all inputs in the website

  2. Use for different browsers

    -webkit-input-placeholder -ms-input-placeholder -moz-placeholder

Upvotes: 4

lky
lky

Reputation: 1129

You should use JS

$(window).resize(function(){
    if ($(window).width() >= 600){  
        $(':input').removeAttr('placeholder');
    }   
});

Upvotes: 5

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You can use media queries and hide and show based on required resolution:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
      ::-webkit-input-placeholder {
         color: lightgray !important; 
      }
      :-moz-placeholder { /* Firefox 18- */
         color: lightgray !important;  
      }

      ::-moz-placeholder {  /* Firefox 19+ */
         color: lightgray !important;  
      }

      :-ms-input-placeholder {  
         color: lightgray !important;  
      }
      #labelID
      {
         display:none !important;
      }
}

Normal Styles

::-webkit-input-placeholder {
         color: transparent;
}
:-moz-placeholder { /* Firefox 18- */
         color: transparent;
}

::-moz-placeholder {  /* Firefox 19+ */
         color: transparent;
}

:-ms-input-placeholder {  
         color: transparent;
}

#labelID{
        display:block;
}

Upvotes: 6

Diwas
Diwas

Reputation: 763

Make both the input field and placeholder text same color. There is no other way with css. 

@media all and (max-width:736px){
    ::-webkit-input-placeholder {
    color:white;
    }

    :-moz-placeholder { /* Firefox 18- */
    color:white;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
    color:white;
    }

    :-ms-input-placeholder {  
    color:white;
    }   
    }

Upvotes: 4

Related Questions