<div class="container">
  <form action="#">

    <input type="checkbox" id="checkbox-1" disabled><label for="checkbox-1">First Choice (disabled)</label>
    <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Second Choice</label>
    <br>

    <br>
    <br>
    <input type="radio" id="radio-1"><label for="radio-1">First Choice</label>
    <input type="radio" id="radio-2" disabled><label for="radio-2">Second Choice (disabled)</label>
    <br>
    <br>
    <textarea name="sth" id="sth" cols="30" rows="10" disabled>I'm disabled</textarea>
    <textarea name="sth-else" id="sth-else" cols="30" rows="10">I'm enabled. Hover me!</textarea>
    <br>
    <br>
    <input type="submit" value="Submit (<input>) Enabled">
    <input type="submit" value="Submit (<input>) Disabled" disabled>
    <br>
    <br>
    <button type="submit" disabled>Submit Button (disabled)</button>
    <button type="submit">Submit Button (enabled)</button>
  </form>
</div>
body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

button:enabled {
  padding: .3em 1.2em;
  border: 1px solid #009966;
  border-radius: 3px;
  background-color: white;
  color: #009966;
  cursor: pointer;
  font-size: 1em;
  margin: 1em;
}

button:enabled:hover {
  background-color: #009966;
  color: white;
}

input[type=submit]:enabled {
  padding: .3em 1.2em;
  font-size: 1em;
  width: 300px;
  margin-bottom: 1em;
  color: #009966;
}

input[type=submit]:disabled,
button[type=submit]:disabled {
  background-color: #eee;
  color: grey;
  border: 1px solid grey;
  cursor: not-allowed;
}

textarea:enabled:hover {
  background-color: lightgreen;
}

textarea:disabled {
  resize: none;
}

input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
  text-decoration: line-through;
  cursor: not-allowed;
  color: grey;
}

input[type="checkbox"]:enabled + label,
input[type="radio"]:enabled + label {
  color: #009966;
}