hide placeholder with css

Question

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,

Answer 1

<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

Answer 2

You should use JS

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

Answer 3

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;
    }   
    }

Answer 4

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.

Answer 5

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 dont 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

Answer 6

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;
}