title: Custom checkbox with content inside the checkbox with multiple seletion in Angular 8
body: <p>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,</p>
  <p><a href="https://i.stack.imgur.com/CbNXv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbNXv.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
     &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;html&quot;&gt;
        &lt;label for=&quot;html&quot;&gt;&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;css&quot;&gt;
        &lt;label for=&quot;css&quot;&gt;&lt;/label&gt;
     &lt;/div&gt;
     &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;checkbox&quot; id=&quot;javascript&quot;&gt;
        &lt;label for=&quot;javascript&quot;&gt;&lt;/label&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.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);
    }
  </code></pre>
  <p>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.</p>
  <p>Any help is much appreciated.</p>
  <p>Thanks in advance!</p>