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