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

My real question is so simple here. How to hide this placeholder with css?

Thanks in advance!

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.

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

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

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

You should use JS

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

<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

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