*next step: trying to style the select field for all browsers
A Pen by cesardanielhg on CodePen.
*next step: trying to style the select field for all browsers
A Pen by cesardanielhg on CodePen.
<div class="bg"></div> | |
<div class="wrap"> | |
<form class="full" action="#"> | |
<h1>Form with blurry background</h1> | |
<div > | |
<select > | |
<option>Here is the first option</option> | |
<option>The second option</option> | |
</select> | |
</div> | |
<div> | |
<label for="name">Text Input:</label> | |
<input type="text" name="name" id="name" placeholder="John Smith" /> | |
</div> | |
<div> | |
<label for="checkbox" class="checkbox">Checkbox | |
<input type="checkbox" name="checkbox" id="checkbox" /></label> | |
</div> | |
<div> | |
<label for="radio-choice-1" class="radio">Choice 1 | |
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" /></label> | |
<label for="radio-choice-2" class="radio">Choice 2 | |
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /></label> | |
</div> | |
<div> | |
<button>Submit</button> | |
</div> | |
<div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
</div> | |
</form> | |
</div> | |
<div class="wrap"> | |
<form action="#"> | |
<h1>Form with blurry background</h1> | |
<div > | |
<select > | |
<option>Here is the first option</option> | |
<option>The second option</option> | |
</select> | |
</div> | |
<div> | |
<label for="name">Text Input:</label> | |
<input type="text" name="name" id="name" placeholder="John Smith" /> | |
</div> | |
<div> | |
<label for="checkbox" class="checkbox">Checkbox | |
<input type="checkbox" name="checkbox" id="checkbox" /></label> | |
</div> | |
<div> | |
<label for="radio-choice-1" class="radio">Choice 1 | |
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" /></label> | |
<label for="radio-choice-2" class="radio">Choice 2 | |
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /></label> | |
</div> | |
<div> | |
<button>Submit</button> | |
</div> | |
<div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
</div> | |
</form> | |
<form class="alt" action="#"> | |
<h1>Form with blurry background</h1> | |
<div > | |
<select > | |
<option>Here is the first option</option> | |
<option>The second option</option> | |
</select> | |
</div> | |
<div> | |
<label for="name">Text Input:</label> | |
<input type="text" name="name" id="name" placeholder="John Smith" /> | |
</div> | |
<div> | |
<label for="checkbox" class="checkbox">Checkbox | |
<input type="checkbox" name="checkbox" id="checkbox" /></label> | |
</div> | |
<div> | |
<label for="radio-choice-1" class="radio">Choice 1 | |
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" /></label> | |
<label for="radio-choice-2" class="radio">Choice 2 | |
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /></label> | |
</div> | |
<div> | |
<button>Submit</button> | |
</div> | |
<div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse ea temporibus accusantium eius voluptatibus excepturi vitae et eaque totam explicabo natus dolorem deleniti? Odio possimus ab earum vero recusandae!</p> | |
</div> | |
</form> | |
</div> |
$(window).scroll(function(e){ | |
parallax(); | |
}); | |
function parallax(){ | |
var scrolled = $(window).scrollTop(); | |
$('.bg').css('top',-(scrolled*.2)+'px'); | |
} |
@import "compass"; | |
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,700); | |
$font-color:#eee; | |
body { | |
//background: url('http://sharebucketapp.com/lMTk3MjNmMWRiMGU5ZDc'); | |
font-family: 'Roboto', sans-serif; | |
color:$font-color; | |
font-weight:300; | |
font-size:100%; | |
text-shadow: | |
1px 1px 5px #000; | |
} | |
.bg { | |
background-image: url('http://sharebucketapp.com/lMTk3MjNmMWRiMGU5ZDc'); | |
background-repeat:repeat; | |
position: fixed; | |
width: 100%; | |
height: 300%; | |
top:0; | |
left:0; | |
z-index: -1; | |
} | |
h1 { | |
font-weight: 100; | |
font-size: 3em; | |
} | |
.wrap { | |
width:700px; | |
padding:50px; | |
margin:0 auto; | |
} | |
form { | |
width:50%; | |
float:left; | |
} | |
form.full { | |
width:100%; | |
float:none; | |
} | |
form.alt { | |
font-family: Verdana; | |
font-weight:100; | |
} | |
form label { | |
display:block; | |
line-height:1.4; | |
font-size:1.5rem; | |
} | |
form div { | |
margin-bottom:20px; | |
} | |
form .select { | |
border: 1px solid #ccc; | |
width:240px; | |
position: relative; | |
color:$font-color; | |
font-weight:300; | |
&:after { | |
content:">"; | |
position: absolute; | |
right:5px; | |
top:0; | |
font-size:1.5rem; | |
font-weight: 700; | |
} | |
} | |
form .select select { | |
background: transparent; | |
width: 250px; | |
padding: 5px; | |
outline:0; | |
font-size: 16px; | |
line-height: 1; | |
border: 0; | |
border-radius: 0; | |
height: 34px; | |
-webkit-appearance: none; | |
} | |
form select { | |
width:240px; | |
padding:10px 10px; | |
height:25px; | |
display:block; | |
} | |
form input[type=text] { | |
border:none; | |
outline:none; | |
font-size:1.5rem; | |
position: relative; | |
color:#fff; | |
color:#000; | |
background:none; | |
font-weight:300; | |
width:300px; | |
padding:5px; | |
border-bottom: 1px dashed $font-color; | |
} | |
form .checkbox, | |
form .radio{ | |
font-size: 1rem; | |
} | |
form input[type=checkbox], | |
form input[type=radio]{ | |
width:20px; | |
margin-top:2px; | |
display:inline-block; | |
float:left; | |
} | |
button, .button, input[type=submit] { | |
border: 0; | |
background: #5786c1; | |
color: white; | |
padding: 8px 14px; | |
font-weight: bold; | |
font-size: 18px; | |
text-decoration: none; | |
display: inline-block; /* needed for anchors */ | |
position: relative; | |
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae, | |
2px 1px #3a587f, 1px 2px #4171ae, | |
3px 2px #3a587f, 2px 3px #4171ae, | |
4px 3px #3a587f, 3px 4px #4171ae, | |
5px 4px #3a587f, 4px 5px #4171ae, | |
6px 5px #3a587f, 5px 6px #4171ae; | |
&:hover, &:focus, | |
&.hover, &.focus { | |
transform: translate(2px, 2px); | |
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae, | |
2px 1px #3a587f, 1px 2px #4171ae, | |
3px 2px #3a587f, 2px 3px #4171ae, | |
4px 3px #3a587f, 3px 4px #4171ae; | |
} | |
&:active, | |
&.active { | |
transform: translate(4px, 4px); | |
box-shadow: 1px 0px #3a587f, 0px 1px #4171ae, | |
2px 1px #3a587f, 1px 2px #4171ae; | |
} | |
} |