151 lines
5.6 KiB
HTML
151 lines
5.6 KiB
HTML
<!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>
|