Responsive Likert Scale for Surveys.

index.html

<div class="wrap">
  <h1 class="likert-header">This is a Likert Scale survey</h1>
  <form action="">
    <label class="statement">This HTML Likert scale is easy to use.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Neutral</label>
      </li>
      <li>
        <input type="radio" name="likert" value="disagree">
        <label>Disagree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly disagree</label>
      </li>
    </ul>
    <label class="statement">It's clear that this is a responsive design.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Neutral</label>
      </li>
      <li>
        <input type="radio" name="likert" value="disagree">
        <label>Disagree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly disagree</label>
      </li>
    </ul>
    <label class="statement">Codepen.io is an excellent tool for prototyping.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Neutral</label>
      </li>
      <li>
        <input type="radio" name="likert" value="disagree">
        <label>Disagree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly disagree</label>
      </li>
    </ul>
    <label class="statement">Pete Fecteau is incredibly smart and handsome.</label>
    <ul class='likert'>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Agree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Neutral</label>
      </li>
      <li>
        <input type="radio" name="likert" value="disagree">
        <label>Disagree</label>
      </li>
      <li>
        <input type="radio" name="likert" value="strong_agree">
        <label>Strongly disagree</label>
      </li>
    </ul>
    <div class="buttons">
      <button class="clear">Clear</button>
      <button class="submit">Submit</button>
    </div>
  </form>
</div>

responsive-likert-scale-for-surveys.markdown

Responsive Likert Scale for Surveys.

Using radio buttons inside a UL, I've creates a responsive form that follows the Likert Scale (http://en.wikipedia.org/wiki/Likert_scale). Embed this form inside a div with a set width or use it as-is and let it scale to 100%.

Forked from Pete Fecteau's Pen Responsive Likert Scale for Surveys..

A Pen by Francisco Maria Calisto on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html,body {padding:0;margin:0;}
.wrap {
  font:12px Arial, san-serif;
}
h1.likert-header {
  padding-left:4.25%;
  margin:20px 0 0;
}
form .statement {
  display:block;
  font-size: 14px;
  font-weight: bold;
  padding: 30px 0 0 4.25%;
  margin-bottom:10px;
}
form .likert {
  list-style:none;
  width:100%;
  margin:0;
  padding:0 0 35px;
  display:block;
  border-bottom:2px solid #efefef;
}
form .likert:last-of-type {border-bottom:0;}
form .likert:before {
  content: '';
  position:relative;
  top:11px;
  left:9.5%;
  display:block;
  background-color:#efefef;
  height:4px;
  width:78%;
}
form .likert li {
  display:inline-block;
  width:19%;
  text-align:center;
  vertical-align: top;
}
form .likert li input[type=radio] {
  display:block;
  position:relative;
  top:0;
  left:50%;
  margin-left:-6px;
  
}
form .likert li label {width:100%;}
form .buttons {
  margin:30px 0;
  padding:0 4.25%;
  text-align:right
} 
form .buttons button {
  padding: 5px 10px;
  background-color: #67ab49;
  border: 0;
  border-radius: 3px;
}
form .buttons .clear {background-color: #e9e9e9;}
form .buttons .submit {background-color: #67ab49;} 
form .buttons .clear:hover {background-color: #ccc;}
form .buttons .submit:hover {background-color: #14892c;}