A Pen by cesardanielhg.

Form-on-blurry-background.markdown

Form on blurry background

*next step: trying to style the select field for all browsers

A Pen by cesardanielhg on CodePen.

License.

index.html

<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>

script.js

$(window).scroll(function(e){
  parallax();
});
function parallax(){
  var scrolled = $(window).scrollTop();
  $('.bg').css('top',-(scrolled*.2)+'px');
}

style.scss

@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;
  }
}