| <!doctype html> |
| <html> |
| <head> |
| <style> |
| div { |
| float: left; |
| border: 1px solid red; |
| } |
| input { |
| background-color: white; |
| color: black; |
| } |
| input:read-only { |
| background-color: lime; |
| } |
| input:read-write { |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test the basic styling of the <input> types with the selectors :read-only and :read-write.</p> |
| <div> |
| <input type="hidden" value="hidden"> |
| <input type="hidden" value="hidden" readonly> |
| <input type="hidden" value="hidden" disabled> |
| <input type="hidden" value="hidden" readonly disabled> |
| </div> |
| <div> |
| <input type="text" value="text"> |
| <input type="text" value="text" readonly> |
| <input type="text" value="text" disabled> |
| <input type="text" value="text" readonly disabled> |
| </div> |
| <div> |
| <input type="search" value="search"> |
| <input type="search" value="search" readonly> |
| <input type="search" value="search" disabled> |
| <input type="search" value="search" readonly disabled> |
| </div> |
| <div> |
| <input type="tel" value="tel"> |
| <input type="tel" value="tel" readonly> |
| <input type="tel" value="tel" disabled> |
| <input type="tel" value="tel" readonly disabled> |
| </div> |
| <div> |
| <input type="url" value="url"> |
| <input type="url" value="url" readonly> |
| <input type="url" value="url" disabled> |
| <input type="url" value="url" readonly disabled> |
| </div> |
| <div> |
| <input type="email" value="email"> |
| <input type="email" value="email" readonly> |
| <input type="email" value="email" disabled> |
| <input type="email" value="email" readonly disabled> |
| </div> |
| <div> |
| <input type="password" value="password"> |
| <input type="password" value="password" readonly> |
| <input type="password" value="password" disabled> |
| <input type="password" value="password" readonly disabled> |
| </div> |
| <div> |
| <input type="datetime" value="datetime"> |
| <input type="datetime" value="datetime" readonly> |
| <input type="datetime" value="datetime" disabled> |
| <input type="datetime" value="datetime" readonly disabled> |
| </div> |
| <div> |
| <input type="date" value="date"> |
| <input type="date" value="date" readonly> |
| <input type="date" value="date" disabled> |
| <input type="date" value="date" readonly disabled> |
| </div> |
| <div> |
| <input type="month" value="month"> |
| <input type="month" value="month" readonly> |
| <input type="month" value="month" disabled> |
| <input type="month" value="month" readonly disabled> |
| </div> |
| <div> |
| <input type="week" value="week"> |
| <input type="week" value="week" readonly> |
| <input type="week" value="week" disabled> |
| <input type="week" value="week" readonly disabled> |
| </div> |
| <div> |
| <input type="time" value="time"> |
| <input type="time" value="time" readonly> |
| <input type="time" value="time" disabled> |
| <input type="time" value="time" readonly disabled> |
| </div> |
| <div> |
| <input type="datetime-local" value="datetime-local"> |
| <input type="datetime-local" value="datetime-local" readonly> |
| <input type="datetime-local" value="datetime-local" disabled> |
| <input type="datetime-local" value="datetime-local" readonly disabled> |
| </div> |
| <div> |
| <input type="number" value="number"> |
| <input type="number" value="number" readonly> |
| <input type="number" value="number" disabled> |
| <input type="number" value="number" readonly disabled> |
| </div> |
| <div> |
| <input type="range" value="range"> |
| <input type="range" value="range" readonly> |
| <input type="range" value="range" disabled> |
| <input type="range" value="range" readonly disabled> |
| </div> |
| <div> |
| <input type="color" value="color"> |
| <input type="color" value="color" readonly> |
| <input type="color" value="color" disabled> |
| <input type="color" value="color" readonly disabled> |
| </div> |
| <div> |
| <input type="checkbox" value="checkbox"> |
| <input type="checkbox" value="checkbox" readonly> |
| <input type="checkbox" value="checkbox" disabled> |
| <input type="checkbox" value="checkbox" readonly disabled> |
| </div> |
| <div> |
| <input type="radio" value="radio"> |
| <input type="radio" value="radio" readonly> |
| <input type="radio" value="radio" disabled> |
| <input type="radio" value="radio" readonly disabled> |
| </div> |
| <div> |
| <input type="file" value="file"> |
| <input type="file" value="file" readonly> |
| <input type="file" value="file" disabled> |
| <input type="file" value="file" readonly disabled> |
| </div> |
| <div> |
| <input type="submit" value="submit"> |
| <input type="submit" value="submit" readonly> |
| <input type="submit" value="submit" disabled> |
| <input type="submit" value="submit" readonly disabled> |
| </div> |
| <div> |
| <input type="image" value="image"> |
| <input type="image" value="image" readonly> |
| <input type="image" value="image" disabled> |
| <input type="image" value="image" readonly disabled> |
| </div> |
| <div> |
| <input type="reset" value="reset"> |
| <input type="reset" value="reset" readonly> |
| <input type="reset" value="reset" disabled> |
| <input type="reset" value="reset" readonly disabled> |
| </div> |
| <div> |
| <input type="button" value="button"> |
| <input type="button" value="button" readonly> |
| <input type="button" value="button" disabled> |
| <input type="button" value="button" readonly disabled> |
| </div> |
| |
| </body> |
| </html> |
