css placeholder input code example

Example 1: css style placeholder

input::-webkit-input-placeholder {/* Chrome/Opera/Safari/Edge */
	/*styles here*/
}

input::-ms-input-placeholder { /* Microsoft Edge */
   /*styles here*/
}

input:-ms-input-placeholder {/* IE 10+ */
	/*styles here*/
}

input::-moz-placeholder {/* Firefox 19+ */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input:-moz-placeholder {/* Firefox 18- */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input::placeholder {
	/*styles here*/
}

Example 2: placeholder css

::-webkit-input-placeholder {color: pink;} /* Chrome/Opera/Safari */
::-moz-placeholder { color: pink;} /* Firefox 19+ */
:-ms-input-placeholder { color: pink;} /* IE 10+ */
:-moz-placeholder {color: pink;}  /* Firefox 18- */

Example 3: placeholder color in css

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

Example 4: css style placeholder

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Placeholder - Style</title>
      <style>
         ::placeholder {
            color: green;
         }

         .force-opaque::placeholder {
            opacity: 1;
         }
      </style>
   </head>
   <body>
      <input placeholder="Default opacity..." />
      <input placeholder="Full opacity..." class="force-opaque" />
   </body>
</html>

Example 5: css style placeholder

::placeholder {
  /*styles here*/
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  /*styles here*/
}

Example 6: change input placeholder text css

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

Tags:

Html Example

Recent Posts