html - 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, 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!

Answer 1

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.