Skip to content

Instantly share code, notes, and snippets.

@alex-boom

alex-boom/Custom-Forms.html

Created August 7, 2016 14:43
Show Gist options
  • Save alex-boom/bde0cd221ad04a149079feadcdde17e3 to your computer and use it in GitHub Desktop.
Save alex-boom/bde0cd221ad04a149079feadcdde17e3 to your computer and use it in GitHub Desktop.
Download ZIP
Custom-Forms
Raw
Custom-Forms.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<title>CSS3 Custom Forms</title>
<style type="text/css">
body{
margin:0;
font:14px/18px 'Open Sans', Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust: none;
}
* {max-height: 10000px;}
input [type="email"], input [type="tel"], input[type="search"], input[type="text"], input[type="password"], input[type="file"], input[type="submit"], textarea{-webkit-appearance:none;}
#wrapper{
margin:20px auto;
width:400px;
border:1px solid #000;
padding:20px;
}
.row{padding:0 0 20px;}
.nice-form [type="radio"],
.nice-form [type="checkbox"]{
position:fixed;
left:0;
top:0;
opacity:0;
z-index: -1;
}
.nice-form .fake-input ,
.nice-form label {
display:inline-block;
vertical-align: middle;
}
.nice-form label{padding-right: 5px;}
.nice-form .fake-input{
display: inline-block;
width:16px;
height:16px;
border:1px solid #bbb;
background:#f8f8f8;
vertical-align: middle;
position: relative;
margin-right: 5px;
}
.nice-form [type=radio] + .fake-input{border-radius:100%;}
.nice-form [type="checkbox"] + .fake-input:before{
content:'';
width:8px;
height:4px;
position:absolute;
top:50%;
left:50%;
border:3px solid #777;
border-width:0 0 3px 3px;
opacity: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:-4px 0 0 -5px;
}
.nice-form [type="radio"] + .fake-input:before{
content:'';
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
background: #777;
border-radius:100%;
opacity: 0;
}
.nice-form [type="radio"]:checked + .fake-input:before,
.nice-form [type="checkbox"]:checked + .fake-input:before{opacity:1;}
.nice-form [type="radio"]:checked ~ .fake-label,
.nice-form [type="checkbox"]:checked ~ .fake-label {font-weight:bold; color:#f00}
.nice-form input:disabled + .fake-input,
.nice-form input:disabled ~ .fake-label{opacity: .5;}
/* select */
.nice-form .fake-select{
position:relative;
display:inline-block;
}
.nice-form select::-ms-expand {display: none;}
.nice-form select{
display:inline-block;
border:2px solid #bbb;
padding:4px 3px 4px 5px;
margin:0;
font:inherit;
outline:none;
line-height:1.2;
background:#f8f8f8;
-webkit-appearance:none;
-webkit-border-radius:6px;
-moz-border-radius:6px;
appearance:none;
border-radius:6px;
width:250px;
position: relative;
}
.nice-form .fake-select:before{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width: 35px;
background:#bbb;
pointer-events:none;
border-radius:0 6px 6px 0;
z-index: 1;
}
.nice-form .fake-select:after{
position: absolute;
right:12px;
content:'';
width:8px;
height:8px;
position:absolute;
top:50%;
border:3px solid #666;
border-width:0 0 3px 3px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top:-6px;
line-height: 0;
z-index: 1;
pointer-events:none;
}
</style>
</head>
<body>
<div id="wrapper">
<form action="#" class="nice-form">
<div class="row">
<label for="check-1">
<input id="check-1" type="checkbox">
<span class="fake-input"></span>
<span class="fake-label">Label text</span>
</label>
</div>
<div class="row">
<label for="check-2">
<input id="check-2" checked="checked" type="checkbox">
<span class="fake-input"></span>
<span class="fake-label">Checked input</span>
</label>
</div>
<div class="row">
<label for="check-3">
<input id="check-3" disabled="disabled" type="checkbox">
<span class="fake-input"></span>
<span class="fake-label">Disabled input</span>
</label>
</div>
<div class="row">
<label for="radio-1">
<input id="radio-1" name="group1" type="radio">
<span class="fake-input"></span>
<span class="fake-label">Label text</span>
</label>
</div>
<div class="row">
<label for="radio-2">
<input id="radio-2" name="group1" type="radio">
<span class="fake-input"></span>
<span class="fake-label">Label text</span>
</label>
</div>
<div class="row">
<label for="radio-3">
<input id="radio-3" name="group1" disabled="disabled" type="radio">
<span class="fake-input"></span>
<span class="fake-label">Disabled input</span>
</label>
</div>
<div class="row">
<label for="select-1">Label text</label>
<span class="fake-select">
<select id="select-1">
<option selected="selected">Select option</option>
<option>Select option 2</option>
<option>Select option 3</option>
<option>Select option 4</option>
</select>
</span>
</div>
</form>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment