A Pen by Omar Jesus Bravo.

CSS3-(Sass-Compass)-Form-Elements.markdown

CSS3 (Sass/Compass) Form Elements

Custom styled CSS3 form elements.

A Pen by Omar Jesus Bravo on CodePen.

License.

index.html

<form action="#">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>

  <fieldset>
    <legend>Gender</legend>

    <label for="radio-choice-1">Male</label>
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

    <label for="radio-choice-2">Female</label>
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
  </fieldset>
  
  
  <div class="select-wrapper">
    <label for="select-choice">Age:</label>
    <div class="styled-select" for="select-choice">
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">Choice 1</option>
        <option value="Choice 2">Choice 2</option>
        <option value="Choice 3">Choice 3</option>
      </select>
    </div>
    
  </div>
  
  <div class="clr">
    <label for="textarea">Favorite Quote:</label><br />
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
    <input type="checkbox" name="checkbox" id="checkbox" />
    <label for="checkbox">I agree to Terms & Conditions</label>
  </div>
  
  <br /><br />
  
  <div>
    <input type="submit" value="Submit" />
    <div class="clr"></div>
  </div>
</form>  

style.scss

@import "compass/css3";
/* Prerequisites:  CSS Reset, Sass/Compass, PrefixFree (by Lea Verou), FontAwesome (for Dropdown Box) */


* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clr {clear:both;}

/* Variables & Mixins */
$bg: #987;  /* Changes Entire Color Scheme */
$text: lighten($bg,35%);

.roundedborder {
  @include border-radius (.2em);
  border: 2px solid darken($bg, 10%);
}

/* General Layout */
body {
  background: $bg; 
  color:$text; 
  font-family:Century Gothic;
}

form { 
  font-size:1.2em; 
  margin: 2em auto; 
  @extend .roundedborder; 
  padding:2em;
  width:70%;
}

input, select, textarea {outline:none;}
label {padding:0 .5em 0 .5em;}


/* Text Input */
input[type='text'] {
  @extend .roundedborder;
  background-color: darken($bg, 5%);
  color: lighten($text, 10%);
  font-size:2em;
  margin:.2em 0 1em;
  padding: .25em;
  width:100%;
}

::-webkit-input-placeholder {color: lighten($bg, 10%);}
:-moz-placeholder {color: lighten($bg, 10%);} /* FF 18 */
::-moz-placeholder {color: lighten($bg, 10%);} /* FF 19+ */
:-ms-input-placeholder {color: lighten($bg, 10%);}


/* Radio Buttons */
fieldset {
  @extend .roundedborder;
  margin-bottom:2em;
  padding:.5em .5em;
}

input[type='radio'] {
  appearance:none;
  border: solid .1em lighten($bg,7%);;
  @include border-radius(50%);
  background-color:darken($bg, 5%);
  color:#f0f;
  cursor:pointer;
  height:2.5em;
  width: 2.5em;
  margin-top:0;
  vertical-align:text-top;
}

input[type="radio"]:checked:after {
  background-color:lighten($bg,15%);
  border-radius:50%;
  content:"\00a0";
  display:block;
  position:relative;
  height:1.5em;
  width:1.5em;
  margin:.4em;
}

/* Dropdown Box */
.styled-select {
  display:inline-block;
  @extend .roundedborder;
  background-color: lighten($bg, 5%);
  color: darken($bg, 10%);
  cursor:pointer;
  font-size:1.1em;
  margin-bottom:1.5em;
  padding:.25em 0;
  position:relative;
  width:15em;
}

.styled-select:before {
  font-family: "FontAwesome"; 
  border: solid 1px darken($bg,10%);
  border-width: 0 0 0 1px;
  content:'\f103';
  color:darken($bg,15%);
  font-size:1.25em;
  padding-left:.25em;
  position:absolute;
  pointer-events:none;
  right:.35em;
}

select {
    appearance:none;
    background-color:transparent;
    border:none;
    cursor:pointer;
    color: darken($bg, 10%);
    display:inline-block;
    font-size:1em;
    margin:0; padding:0 2em 0 1em;
    width:100%;
}

/* Text Area */
textarea {
  @extend .roundedborder;
  background-color: darken($bg, 5%);
  color: lighten($text, 10%);
  font-size:1em;
  height:10em;
  margin:.5em 0 1em;
  padding:1em;
  width:100%;
}

/* Checkbox */
input[type='checkbox'] {
  appearance:none;
  @extend .roundedborder;
  background-color:darken($bg, 5%);
  cursor:pointer;
  font-size:1em;
  padding: .25em;
  height:1em; width:1em;
  vertical-align:text-top;
}

input[type='checkbox']:checked:after {
  border:solid $text;
  border-width:0 4px 4px 0;
  content:"\00a0";
  display:block;
  height:1em; width:.5em;
  margin-top:-.9em;
  position:relative;
  transform:rotate(45deg); 
}


/* Submit Button */
input[type='submit'] {
  @extend .roundedborder;
  border: 3px solid darken($bg, 10%);
  background-color:lighten($bg, 5%);
  cursor:pointer;
  color:lighten($bg,50%);
  float:right;
  font-size:1.5em;
  padding: .25em 1em;
  @include text-shadow(.1em .1em .2em #333);
}
input[type='submit']:hover {background-color:darken($bg,5%);}