| <!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 class="default">First</button> |
| </form> |
| <form> |
| <button class="default">First</button> |
| <button>Second</button> |
| </form> |
| <form> |
| <fieldset> |
| <button class="default">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" class="default"> |
| </form> |
| <form> |
| <input type="image" class="default"> |
| </form> |
| <form> |
| <input> |
| <input type="submit" class="default"> |
| <input type="image"> |
| </form> |
| <form> |
| <input type="text"> |
| <input type="image" class="default"> |
| <input type="submit"> |
| </form> |
| <form> |
| <button class="default">Button</button> |
| <input type="image"> |
| <input type="submit"> |
| </form> |
| <form> |
| <input type="submit" class="default"> |
| <button>Button</button> |
| <input type="image"> |
| </form> |
| <form> |
| <input type="image" class="default"> |
| <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 class="default"><span>A</span> |
| <input type="radio" checked class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked class="default"><span>A</span> |
| <input type="radio" name="group1" checked class="default"><span>A</span> |
| <input type="checkbox" checked=false class="default"><span>A</span> |
| <input type="radio" checked=false class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked=false class="default"><span>A</span> |
| <input type="radio" name="group1" checked=false class="default"><span>A</span> |
| <input type="checkbox" checked=webkit class="default"><span>A</span> |
| <input type="radio" checked=webkit class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked=webkit class="default"><span>A</span> |
| <input type="radio" name="group1" checked=webkit class="default"><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 class="default"><span>A</span> |
| <input type="radio" checked disabled class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked disabled class="default"><span>A</span> |
| <input type="radio" name="group1" checked disabled class="default"><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 class="default"><span>A</span> |
| <input type="radio" checked class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked class="default"><span>A</span> |
| <input type="radio" name="group1" checked class="default"><span>A</span> |
| <input type="checkbox" checked=false class="default"><span>A</span> |
| <input type="radio" checked=false class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked=false class="default"><span>A</span> |
| <input type="radio" name="group1" checked=false class="default"><span>A</span> |
| <input type="checkbox" checked=webkit class="default"><span>A</span> |
| <input type="radio" checked=webkit class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked=webkit class="default"><span>A</span> |
| <input type="radio" name="group1" checked=webkit class="default"><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 class="default"><span>A</span> |
| <input type="radio" checked disabled class="default"><span>A</span> |
| <input type="checkbox" name="group1" checked disabled class="default"><span>A</span> |
| <input type="radio" name="group1" checked disabled class="default"><span>A</span> |
| </form> |
| </div> |
| <div> |
| <option>Option</option><span>Option</span> |
| <option selected class="default">Option</option><span>Option</span> |
| <option selected=false class="default">Option</option><span>Option</span> |
| <option selected=WebKit class="default">Option</option><span>Option</span> |
| <select> |
| <option>Option</option><span>Option</span> |
| <option selected class="default">Option</option><span>Option</span> |
| <option selected=false class="default">Option</option><span>Option</span> |
| <option selected=WebKit class="default">Option</option><span>Option</span> |
| </select> |
| </div> |
| </body> |
| </html> |
