Custom checkbox with content inside the checkbox with multiple seletion in Angular 8

Question

I have a requirement where I want to have custom checkbox (not necessary to have it as checkbox) having content inside and can select multiple of them as below,

<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css"></label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript"></label>
   </div>
</div>

CSS

.form-group {
    display: block;
    margin-bottom: 15px;
  }
  
  .form-group input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
  }
  
  .form-group label {
    position: relative;
    cursor: pointer;
  }
  
  .form-group label:before {
    content:'';
    -webkit-appearance: none;
    background-color: orange;
    border: 2px solid tranparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 30px;
  }
  
  .form-group input:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 12px;
    width: 6px;
    height: 14px;
    border: solid #0079bf;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

Here the user can select and deselect the values (selected ones are in dark orange color and not selected ones in light orange). I tried this checkboxes but it isn't working fine as we get only ok sign content, can anyone suggest me how I can achieve it.

Any help is much appreciated.

Thanks in advance!

Answer 1

Hide the checkbox with height, width and opacity 0 and make use of the CSS to style the label and the text.

.custom-checkbox {
  display: flex;
}

.custom-checkbox input {
  height: 0;
  width: 0;
  opacity: 0;
}

.custom-checkbox .form-group {
  margin: 0 12px;
  /* adjust spacing here between check boxes*/
}

.custom-checkbox .form-group label {
  display: flex;
  box-sizing: border-box;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #fdf6e1;
  color: #7d6540;
  border: 1px solid orange;
  align-items: center;
  justify-content: center;
  font: 14px helvetica, arial, sans-serif;
  cursor: pointer;
  transition: linear 0.2s
}

.custom-checkbox input:checked+label {
  background: orange;
  color: #FFF;
  border: 1px solid #d4830d;
  text-shadow: 0 0 2px #000
}

<div class="row custom-checkbox">
  <div class="form-group">
    <input type="checkbox" name="week" id="html">
    <label for="html">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="css">
    <label for="css">M</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="javascript">
    <label for="javascript">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="react">
    <label for="react">W</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="vue">
    <label for="vue">T</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="typescript">
    <label for="typescript">F</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="scss">
    <label for="scss">S</label>
  </div>
  <div class="form-group">
    <input type="checkbox" name="week" id="ux">
    <label for="ux">S</label>
  </div>
</div>

Answer 2

Why are you using before and after? just use the label itself.

And then you can hide the checkbox and just style the label.

A click on the label will check / uncheck the checkbox, which triggers the style change of the label.

.form-group input {
  /* hide the checkbox */
  display: none;
}
.form-group label {
  /* style the label as a circle etc. */
  background-color: white;
}
.form-group input:checked + label {
  /* selected style */
  background-color: orange;
}

<div class="row">
   <div class="form-group">
      <input type="checkbox" id="html">
      <label for="html">html</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="css">
      <label for="css">css</label>
   </div>
   <div class="form-group">
      <input type="checkbox" id="javascript">
      <label for="javascript">javascript</label>
   </div>
</div>