<form> <fieldset> <legend>Form Elements</legend> <input type="button" value="Input Button"> <input type="submit" value="Input Submit"> <input type="reset" value="Input Reset"> <button>Button</button> <br> <input type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" width="22" height="22"> <label><input type="checkbox"> Label</label> <label><input type="radio"> Label</label> <br> <input type="text" value="Input Text"> <input type="email" value="[email protected]"> <input type="tel" value="(555) 555-5555"> <input type="url" value="http://"> <br> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="range" value="10"> <br> <input type="file"> <br> <input type="number" value="10"> <input type="date"> <br> <input type="color" value="#00ffff"> <input type="search" value="keyword"> <br> <textarea rows="4"></textarea> <select size="4"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> <br> <meter min="0" max="100" value="10">12cm</meter> <progress min="0" max="100" value="30">30%</progress> </fieldset> <fieldset> <legend>Disabled Form Elements</legend> <input type="button" value="Input Button" disabled> <input type="submit" value="Input Submit" disabled> <input type="reset" value="Input Reset" disabled> <button disabled>Button</button> <br> <input type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" width="22" height="22" disabled> <label><input type="checkbox" disabled> Label</label> <label><input type="radio" disabled> Label</label> <br> <input type="text" value="Input Text" disabled> <input type="email" value="[email protected]" disabled> <input type="tel" value="(555) 555-5555" disabled> <input type="url" value="http://" disabled> <br> <select disabled> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="range" value="10" disabled> <br> <input type="file" disabled> <br> <input type="number" value="10" disabled> <input type="date" disabled> <br> <input type="color" value="#00ffff" disabled> <input type="search" value="keyword" disabled> <br> <textarea rows="4" disabled></textarea> <select size="4" disabled> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> </fieldset> <fieldset> <legend>Readonly Form Elements</legend> <input type="text" value="Input Text" readonly> <input type="email" value="[email protected]" readonly> <input type="tel" value="(555) 555-5555" readonly> <input type="url" value="http://" readonly> <br> <input type="number" value="10" readonly> <br> <textarea rows="4" readonly>Lorem ipsum dolor sit amet...</textarea> </fieldset> <fieldset> <legend>Placeholders</legend> <input type="text" placeholder="Text Input"> <input type="email" placeholder="[email protected]"> <input type="tel" placeholder="(555) 555-5555"> <input type="url" placeholder="http://"> <br> <input type="number" placeholder="10"> <br> <textarea rows="4" placeholder="Your text goes here..."></textarea> </fieldset> </form>
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'); /* ignore this! */ body { margin:0; padding:40px; background-color:white; font:normal normal 16px/1.4 "Source Sans Pro",Calibri,Arial,Sans-Serif; color:#333; } form { margin:0; padding:0; } /* ignore this! */ button, input, select, textarea { display:inline-block; vertical-align:middle; width:170px; margin:4px 2px; padding:8px; font:normal normal 16px/normal "Source Sans Pro",Calibri,Arial,Sans-Serif; color:#666; line-height:normal; background-color:white; border:1px solid #ccc; border-top-color:#999; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; outline-offset:-2px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1); box-shadow:inset 0 1px 1px rgba(0,0,0,.1); -webkit-transition:all .26s ease-out; -moz-transition:all .26s ease-out; -ms-transition:all .26s ease-out; -o-transition:all .26s ease-out; transition:all .26s ease-out; } button, input[type="button"], input[type="reset"], input[type="submit"] { width:auto; background-color:#cc0000; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#cc0000),color-stop(100%,#960a00)); background-image:-webkit-linear-gradient(top,#cc0000 0%,#960a00 100%); background-image:-moz-linear-gradient(top,#cc0000 0%,#960a00 100%); background-image:-ms-linear-gradient(top,#cc0000 0%,#960a00 100%); background-image:-o-linear-gradient(top,#cc0000 0%,#960a00 100%); background-image:linear-gradient(to bottom,#cc0000 0%,#960a00 100%); color:#ffefbf; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,.3); padding-right:16px; padding-left:16px; cursor:pointer; border-color:#9a0a00 #9a0a00 #7e0a03; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); -webkit-transition-duration:0s; -moz-transition-duration:0s; -ms-transition-duration:0s; -o-transition-duration:0s; transition-duration:0s; } input[type="checkbox"], input[type="image"], input[type="radio"] { width:auto; padding:0; background:none; border:none; cursor:pointer; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; } input[type="checkbox"], input[type="radio"] { position:relative; top:-2px; } input[type="color"], input[type="file"], label, select { display:inline-block; vertical-align:middle; cursor:pointer; } textarea { overflow:auto; display:block; width:100%; resize:vertical; margin-right:0; margin-left:0; } button::-moz-focus-inner, input::-moz-focus-inner { margin:0; padding:0; border:none; outline:none; } input:focus, select:focus, textarea:focus { border-color:#5079b7; -webkit-box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db; -moz-box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db; box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color:#e80000; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e80000),color-stop(100%,#ba0c00)); background-image:-webkit-linear-gradient(top,#e80000 0%,#ba0c00 100%); background-image:-moz-linear-gradient(top,#e80000 0%,#ba0c00 100%); background-image:-ms-linear-gradient(top,#e80000 0%,#ba0c00 100%); background-image:-o-linear-gradient(top,#e80000 0%,#ba0c00 100%); background-image:linear-gradient(to bottom,#e80000 0%,#ba0c00 100%); border-color:#ba0c00 #ba0c00 #a20d03; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4); } button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-image:none; background-color:#980900; border-color:transparent; -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.4); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); } fieldset { margin:0 0 1em; padding:1em; border:1px solid #ccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } legend { margin:0; padding:0 10px; font-weight:bold; } button[disabled], input[disabled], select[disabled], textarea[disabled] { opacity:.7; cursor:default; cursor:not-allowed; background-image:none !important; background-color:#eee; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; } button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] {background-color:#c40200 !important} input[type="date"][readonly], input[type="email"][readonly], input[type="number"][readonly], input[type="tel"][readonly], input[type="text"][readonly], input[type="url"][readonly], textarea[readonly], input[type="date"][readonly]:focus, input[type="email"][readonly]:focus, input[type="number"][readonly]:focus, input[type="tel"][readonly]:focus, input[type="text"][readonly]:focus, input[type="url"][readonly]:focus, textarea[readonly]:focus { background-color:#eee; cursor:default; } ::-webkit-input-placeholder {color:#888} :-ms-input-placeholder {color:#888} ::-moz-placeholder {color:#888} :-moz-placeholder {color:#888} :placeholder {color:#888} :focus::-webkit-input-placeholder {color:#ccc} :focus:-ms-input-placeholder {color:#ccc} :focus::-moz-placeholder {color:#ccc} :focus:-moz-placeholder {color:#ccc} :focus:placeholder {color:#ccc} input[type="range"] { height:0; padding:2px 0; }