<legend>מהו התחביב האהוב עליך?</legend>
<div class="formWrap">
  <input checked type="checkbox" id="music" name="hobies" value="music" />
  <label for="music" class="inputDesign">מוסיקה</label>
</div>
<div class="formWrap">
  <input type="checkbox" id="cooking" name="hobies" value="cooking" />
  <label for="cooking" class="inputDesign">בישול</label>
</div>
<div class="formWrap">
  <input type="checkbox" id="paint" name="hobies" value="paint" />
  <label for="paint" class="inputDesign">ציור</label>
</div>

<legend>בחר חיית מחמד:</legend>
<div class="formWrap">
  <input type="radio" id="dog" name="pet" value="dog" />
  <label for="dog" class="inputDesign">כלב</label>
</div>
<div class="formWrap">
  <input type="radio" id="cat" name="pet" value="cat" />
  <label for="cat" class="inputDesign">חתול</label>
</div>
<div class="formWrap">
  <input checked type="radio" id="gellyfish" name="pet" value="gellyfish" />
  <label for="gellyfish" class="inputDesign">מדוזה</label>
</div>
body{
  direction: rtl;
  font-family: arial;
  text-align: right;
}
legend{
  margin-top: 20px;
}
.inputDesign:before{
  content: '\f00c';
  font-family: fontAwesome;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #aaa;
  color: transparent;
  margin: 3px;
}
input[type = "checkbox"] ~ .inputDesign:before{
  content: '\f00c';  
  font-size: 80%;
}
input[type = "radio"] ~ .inputDesign:before{
  content: '\f004';  
  border-radius: 50%;
  font-size: 70%;
  padding: 3px;
}
input[type = "checkbox"]:checked ~ .inputDesign:before{
  color: #1a1a67;
}
input[type = "radio"]:checked ~ .inputDesign:before{
  color: red;
}
input{
  visibility: hidden;
  position: absolute;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.