| <!DOCTYPE html> |
| <style> |
| input.red::-webkit-input-placeholder { |
| color: rgb(100, 0, 0); |
| } |
| |
| .blue::placeholder { |
| color: blue; |
| } |
| |
| .prefixed-unprefixed::-webkit-input-placeholder { |
| color: red; |
| } |
| .prefixed-unprefixed::placeholder { |
| color: blue; |
| } |
| |
| .unprefixed-prefixed::placeholder { |
| color: blue; |
| } |
| .unprefixed-prefixed::-webkit-input-placeholder { |
| color: red; |
| } |
| </style> |
| This tests that you can set the placeholder text color. |
| |
| <div> |
| Default style: |
| <input placeholder="default"> |
| <input placeholder="default disabled"> |
| </div> |
| |
| <div> |
| ::-webkit-input-placeholder: |
| <input class="red" placeholder="text"> |
| <input class="red" type="search" placeholder="search"> |
| <input class="red" type="password" placeholder="password"> |
| <input class="red" disabled placeholder="disabled text"> |
| </div> |
| |
| <div> |
| ::placeholder: |
| <input class="blue" placeholder="text"> |
| <input class="blue" type="search" placeholder="search"> |
| <input class="blue" type="password" placeholder="password"> |
| <input class="blue" disabled placeholder="disabled text"> |
| </div> |
| |
| <div> |
| Both: |
| <input class="prefixed-unprefixed" placeholder="unprefixed"> |
| <input class="unprefixed-prefixed" placeholder="prefixed"> |
| </div> |
