Как создать анимированный флажок с интерактивными этикетками с помощью CSS

Question

Я хочу сделать флажок анимированным с интерактивным ярлыком с помощью CSS

<input type="checkbox" id="chk1" /> 
<label for="chk1">check me!</label> 

[type="checkbox"]:not(:checked) + label:before { 
 
       background: #f8f8f8; 
 
      } 
 
    
 
      [type="checkbox"]:not(:checked), [type="checkbox"]:checked { 
 
       position: absolute; 
 
      } 
 
    
 
    
 
      [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { 
 
       position: relative; 
 
       padding-left: 25px; 
 
       cursor: pointer; 
 
       line-height: 1.7 !important; 
 
       font-weight: 400; 
 
      } 
 
    
 
      label { 
 
       display: inline-block; 
 
       max-width: 100%; 
 
       margin-bottom: 5px; 
 
       font-weight: bold; 
 
      } 
 
    
 
      [type="checkbox"]:checked + label:before { 
 
       background: red; 
 
       transition: all .5s; 
 
       -webkit-transition: all .5s; 
 
      } 
 
    
 
      [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { 
 
       content: ''; 
 
       position: absolute; 
 
       left: 0; 
 
       top: 5px; 
 
       width: 17px; 
 
       height: 17px; 
 
       border: 1px solid #ccc; 
 
       border-radius: 3px; 
 
      } 
 
    
 
      *:before, *:after { 
 
       -webkit-box-sizing: border-box; 
 
       -moz-box-sizing: border-box; 
 
       box-sizing: border-box; 
 
      } 
 
    
 
      [type="checkbox"]:checked + label:after { 
 
       content: '✔'; 
 
       position: absolute; 
 
       top: 5px; 
 
       left: 2px; 
 
       font-size: 18px; 
 
       line-height: .8; 
 
       color: #fff; 
 
      }

<input type="checkbox" id="chk1" style="display:none;" /> 
 
<label for="chk1">check me!</label>

Answer 1

<input type="checkbox" id="chk1" style="display:none;" /> 
<label for="chk1">check me!</label> 

<style> 
    [type="checkbox"]:not(:checked) + label:before { 
     background: #f8f8f8; 
    } 

    [type="checkbox"]:not(:checked), [type="checkbox"]:checked { 
     position: absolute; 
    } 


     [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { 
      position: relative; 
      padding-left: 25px; 
      cursor: pointer; 
      line-height: 1.7 !important; 
      font-weight: 400; 
     } 

    label { 
     display: inline-block; 
     max-width: 100%; 
     margin-bottom: 5px; 
     font-weight: bold; 
    } 

    [type="checkbox"]:checked + label:before { 
     background: red; 
     transition: all .5s; 
     -webkit-transition: all .5s; 
    } 

    [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { 
     content: ''; 
     position: absolute; 
     left: 0; 
     top: 5px; 
     width: 17px; 
     height: 17px; 
     border: 1px solid #ccc; 
     border-radius: 3px; 
    } 

    *:before, *:after { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    [type="checkbox"]:checked + label:after { 
     content: '✔'; 
     position: absolute; 
     top: 5px; 
     left: 2px; 
     font-size: 18px; 
     line-height: .8; 
     color: #fff; 
    } 
</style>