Change an HTML5 input's placeholder color with CSS

后端 未结 30 3054
猫巷女王i
猫巷女王i 2020-11-21 04:36

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn\'t do anything

30条回答
  •  伪装坚强ぢ
    2020-11-21 04:55

    Here is the solution with CSS selectors

    ::-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 { /* Microsoft Edge */
       color:    #909;
    }
    
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
       color:    #909;
    }
    
    • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
      ::-webkit-input-placeholder.
    • Mozilla Firefox 4 to 18 is using a pseudo-class:
      :-moz-placeholder (one colon).
      Mozilla Firefox 19+ is using a pseudo-element:
      ::-moz-placeholder, but the old selector will still work for a while.
    • Internet Explorer 10 and 11 are using a pseudo-class:
      :-ms-input-placeholder.
    • Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

提交回复
热议问题