2

I am trying to style placeholder text, but I can't seem to select it. If my input is this:

<input id="search" class="search-query" placeholder="Placeholder text here" name="" value"">

How can I select the placeholder text in css for styling?

user1995822
  • 23
  • 1
  • 1
  • 3
  • 1
    duplicate http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – aug Jan 21 '13 at 02:48

1 Answers1

15
::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

/* All modern browsers except IE and EDGE */
::placeholder { color: red }

Demo: http://jsfiddle.net/DLGFK/

hitautodestruct
  • 20,081
  • 13
  • 69
  • 93
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • Thanks, sorry I am starting using LESS, and that is where I messed up. The above selectors work as intended – user1995822 Jan 21 '13 at 03:13
  • 1
    @AlienWebGuy All modern browsers besides IE/EDGE now support the non flagged pseudo class `::placeholder` see [caniuse.com](https://caniuse.com/#feat=css-placeholder) – hitautodestruct Jan 30 '18 at 12:24