| <!DOCTYPE html> |
| <style> |
| textarea.red::-webkit-input-placeholder { |
| color: rgb(100, 0, 0); |
| } |
| |
| .blue::placeholder { |
| color: blue; |
| font-weight: bold; |
| font-size: 16px; |
| } |
| |
| .blue { |
| width: 135px; |
| height: 30px; |
| } |
| |
| .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: |
| <textarea placeholder="default"></textarea> |
| <textarea disabled placeholder="default disabled"></textarea> |
| </div> |
| |
| <div> |
| ::-webkit-input-placeholder: |
| <textarea class="red" placeholder="text"></textarea> |
| <textarea class="red" disabled placeholder="disabled text"></textarea> |
| </div> |
| |
| <div> |
| ::placeholder: |
| <textarea class="blue" placeholder="text"></textarea> |
| <textarea class="blue" disabled placeholder="disabled text"></textarea> |
| </div> |
| |
| <div> |
| Both: |
| <textarea class="prefixed-unprefixed" placeholder="unprefixed"></textarea> |
| <textarea class="unprefixed-prefixed" placeholder="prefixed"></textarea> |
| </div> |
