Generic Form Elements

form-styles.css

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="fax"],
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="password"],
input[type="time"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: .5em .7em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0; /* be sure to set this, because browsers have their own intentions */
}

select {
  cursor: pointer; /* I like it when the hand shows up on a select element */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="fax"],
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="password"],
input[type="time"],
input[type="url"],
select {
  height: 42px; /* keep the inputs and selects the same height */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="fax"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="month"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: #000; /* border color when the field is active */
  outline: none;
}


.c-form__group {
  margin-bottom: 10px;
}

.c-form__group,
.c-form__row {
  display: block;
  float: left;
  width: 100%;
  clear: both;
}

.c-form__row {
  margin-bottom: 10px;
}

.c-form__field label {
}

.captcha-img {
  margin-top: 2.3em;
}

.c-form__field {
  display: block;
  float: left;
  width: 100%;
}

@media all and (min-width:768px) {
	.c-form__field { padding: 0 5px; }

	.c-form__field:first-child {
	  padding-left: 0;
	}

	.c-form__field:last-child {
	  padding-right: 0;
	}

  .u-w10 { width: 10%; }
  .u-w15 { width: 15%; }
  .u-w20 { width: 20%; }
  .u-w25 { width: 25%; }
  .u-w30 { width: 30%; }
  .u-w33 { width: 33%; }
  .u-w35 { width: 35%; }
  .u-w40 { width: 40%; }
  .u-w45 { width: 45%; }
  .u-w50 { width: 50%; }
  .u-w55 { width: 55%; }
  .u-w60 { width: 60%; }
  .u-w65 { width: 65%; }
  .u-w67 { width: 67%; }
  .u-w70 { width: 70%; }
  .u-w75 { width: 75%; }
  .u-w80 { width: 80%; }
  .u-w85 { width: 85%; }
  .u-w90 { width: 90%; }
  .u-w95 { width: 95%; }
}

form-styles.scss

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="fax"],
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="password"],
input[type="time"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: .5em .7em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0; /* be sure to set this, because browsers have their own intentions */
}

select {
  cursor: pointer; /* I like it when the hand shows up on a select element */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="fax"],
input[type="date"],
input[type="datetime"],
input[type="month"],
input[type="password"],
input[type="time"],
input[type="url"],
select {
  height: 42px; /* keep the inputs and selects the same height */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="fax"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="month"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: #000; /* border color when the field is active */
  outline: none;
}


.c-form {
  &__group {
    margin-bottom: 10px;
  }

  &__group,
  &__row {
    display: block;
    float: left;
    width: 100%;
    clear: both;
  }

  &__row {
    margin-bottom: 10px;
  }
  
  .captcha-img {
    margin-top: 2.3em;
  }

  &__field {
    display: block;
    float: left;
    width: 100%;

    label {}
  }
}



@media all and (min-width:768px) {
  .c-form {
    &__field { padding: 0 5px; }

    &__field:first-child {
      padding-left: 0;
    }

    &__field:last-child {
      padding-right: 0;
    }
  }
  
  .u-w10 { width: 10%; }
  .u-w15 { width: 15%; }
  .u-w20 { width: 20%; }
  .u-w25 { width: 25%; }
  .u-w30 { width: 30%; }
  .u-w33 { width: 33%; }
  .u-w35 { width: 35%; }
  .u-w40 { width: 40%; }
  .u-w45 { width: 45%; }
  .u-w50 { width: 50%; }
  .u-w55 { width: 55%; }
  .u-w60 { width: 60%; }
  .u-w65 { width: 65%; }
  .u-w67 { width: 67%; }
  .u-w70 { width: 70%; }
  .u-w75 { width: 75%; }
  .u-w80 { width: 80%; }
  .u-w85 { width: 85%; }
  .u-w90 { width: 90%; }
  .u-w95 { width: 95%; }
}

form.html

<div class="c-form__group">
  <div class="c-form__field w25">
    <label><span class="req">* </span>Label</label>
    <input type="text" name="fieldname" class="required" />
  </div>
</div>