html - Modifier une entrée HTML5 paramètre#39;s placeholder color with CSS

92

::-webkit-input-placeholder { /* WebKit, Blink, Edge */      color:    #909;  }  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */     color:    #909;     opacity:  1;  }  ::-moz-placeholder { /* Mozilla Firefox 19+ */     color:    #909;     opacity:  1;  }  :-ms-input-placeholder { /* Internet Explorer 10-11 */     color:    #909;  }  ::-ms-input-placeholder { /* Microsoft Edge */     color:    #909;  }    ::placeholder { /* Most modern browsers support this now. */     color:    #909;  }

<input placeholder="Stack Snippets are awesome!">

    [type="search"] {         -moz-appearance:    textfield;         -webkit-appearance: textfield;         appearance: textfield;     } 

83

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

<input placeholder="hello"/> <br />  <textarea placeholder="hello"></textarea>

70

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {   color: #FF9900; }  input:-moz-placeholder, textarea:-moz-placeholder {   color: #FF9900; }

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!"> </textarea>

70

// Placeholder text // ------------------------- .placeholder(@color: @placeholderText) {   &:-moz-placeholder {     color: @color;   }   &:-ms-input-placeholder {     color: @color;   }   &::-webkit-input-placeholder {     color: @color;   } }