| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style> | |
| * { | |
| -webkit-appearance: none; | |
| } | |
| form, fieldset, option { | |
| display: inline; | |
| } | |
| :default, :default + span { | |
| background-color: green; | |
| padding: 2px; | |
| } | |
| input:matches([type=checkbox], [type=radio] { | |
| width: 30px; | |
| height: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <!-- Default button of type button --> | |
| <button>Out of form</button> | |
| <form> | |
| <button>First</button> | |
| </form> | |
| <form> | |
| <button>First</button> | |
| <button>Second</button> | |
| </form> | |
| <form> | |
| <fieldset> | |
| <button>First</button> | |
| </fieldset> | |
| <button>Second</button> | |
| </form> | |
| </div> | |
| <div> | |
| <!-- Default button of type input--> | |
| <input> | |
| <input type="text"> | |
| <input type="submit"> | |
| <input type="image"> | |
| <input value="WebKit"> | |
| <input type="text" value="WebKit"> | |
| <input type="submit" value="WebKit"> | |
| <input type="image" value="WebKit"> | |
| <form> | |
| <input> | |
| </form> | |
| <form> | |
| <input type="submit"> | |
| </form> | |
| <form> | |
| <input type="image"> | |
| </form> | |
| <form> | |
| <input> | |
| <input type="submit"> | |
| <input type="image"> | |
| </form> | |
| <form> | |
| <input type="text"> | |
| <input type="image"> | |
| <input type="submit"> | |
| </form> | |
| <form> | |
| <button>Button</button> | |
| <input type="image"> | |
| <input type="submit"> | |
| </form> | |
| <form> | |
| <input type="submit"> | |
| <button>Button</button> | |
| <input type="image"> | |
| </form> | |
| <form> | |
| <input type="image"> | |
| <input type="submit"> | |
| <button>Button</button> | |
| </form> | |
| </div> | |
| <div> | |
| <!-- Check boxes and radio button --> | |
| <input type="checkbox"><span>A</span> | |
| <input type="radio"><span>A</span> | |
| <input type="checkbox" name="group1"><span>A</span> | |
| <input type="radio" name="group1"><span>A</span> | |
| <input type="checkbox" checked><span>A</span> | |
| <input type="radio" checked><span>A</span> | |
| <input type="checkbox" name="group1" checked><span>A</span> | |
| <input type="radio" name="group1" checked><span>A</span> | |
| <input type="checkbox" checked=false><span>A</span> | |
| <input type="radio" checked=false><span>A</span> | |
| <input type="checkbox" name="group1" checked=false><span>A</span> | |
| <input type="radio" name="group1" checked=false><span>A</span> | |
| <input type="checkbox" checked=webkit><span>A</span> | |
| <input type="radio" checked=webkit><span>A</span> | |
| <input type="checkbox" name="group1" checked=webkit><span>A</span> | |
| <input type="radio" name="group1" checked=webkit><span>A</span> | |
| <input type="checkbox" disabled><span>A</span> | |
| <input type="radio" disabled><span>A</span> | |
| <input type="checkbox" name="group1" disabled><span>A</span> | |
| <input type="radio" name="group1" disabled><span>A</span> | |
| <input type="checkbox" checked disabled><span>A</span> | |
| <input type="radio" checked disabled><span>A</span> | |
| <input type="checkbox" name="group1" checked disabled><span>A</span> | |
| <input type="radio" name="group1" checked disabled><span>A</span> | |
| <form> | |
| <input type="checkbox"><span>A</span> | |
| <input type="radio"><span>A</span> | |
| <input type="checkbox" name="group1"><span>A</span> | |
| <input type="radio" name="group1"><span>A</span> | |
| <input type="checkbox" checked><span>A</span> | |
| <input type="radio" checked><span>A</span> | |
| <input type="checkbox" name="group1" checked><span>A</span> | |
| <input type="radio" name="group1" checked><span>A</span> | |
| <input type="checkbox" checked=false><span>A</span> | |
| <input type="radio" checked=false><span>A</span> | |
| <input type="checkbox" name="group1" checked=false><span>A</span> | |
| <input type="radio" name="group1" checked=false><span>A</span> | |
| <input type="checkbox" checked=webkit><span>A</span> | |
| <input type="radio" checked=webkit><span>A</span> | |
| <input type="checkbox" name="group1" checked=webkit><span>A</span> | |
| <input type="radio" name="group1" checked=webkit><span>A</span> | |
| <input type="checkbox" disabled><span>A</span> | |
| <input type="radio" disabled><span>A</span> | |
| <input type="checkbox" name="group1" disabled><span>A</span> | |
| <input type="radio" name="group1" disabled><span>A</span> | |
| <input type="checkbox" checked disabled><span>A</span> | |
| <input type="radio" checked disabled><span>A</span> | |
| <input type="checkbox" name="group1" checked disabled><span>A</span> | |
| <input type="radio" name="group1" checked disabled><span>A</span> | |
| </form> | |
| </div> | |
| <div> | |
| <option>Option</option><span>Option</span> | |
| <option selected>Option</option><span>Option</span> | |
| <option selected=false>Option</option><span>Option</span> | |
| <option selected=WebKit>Option</option><span>Option</span> | |
| <select> | |
| <option>Option</option><span>Option</span> | |
| <option selected>Option</option><span>Option</span> | |
| <option selected=false>Option</option><span>Option</span> | |
| <option selected=WebKit>Option</option><span>Option</span> | |
| </select> | |
| </div> | |
| </body> | |
| </html> |