<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col-12"> <h2>Bootsprap 4.1 pure CSS custom radios and checkboxes</h2> </div> <div class="col-6"> <div class="card mb-3"> <div class="card-header small"> <i class="far fa-dot-circle fa-fw"></i> Direction: column </div> <div class="card-body"> <!-- RADIOS IN COLUMN START --> <div class="sweetbox-group sweetbox-group-column"> <div class="sweetbox sweetbox-md"> <input type="radio" name="radio_col" id="radio_col_1" value="1" /> <label for="radio_col_1">Lorem ipsum dolor sit amet</label> </div> <div class="sweetbox sweetbox-md"> <input type="radio" name="radio_col" id="radio_col_2" value="2" /> <label for="radio_col_2">Consectetur adipiscing elit</label> </div> <div class="sweetbox sweetbox-md"> <input type="radio" name="radio_col" id="radio_col_3" value="3" /> <label for="radio_col_3">Curabitur vitae laoreet orci</label> </div> <div class="sweetbox sweetbox-md"> <input type="radio" name="radio_col" id="radio_col_4" checked="checked" value="4" /> <label for="radio_col_4">Eu pellentesque ipsum</label> </div> </div> <!-- EOF RADIOS IN COLUMN --> </div> </div> </div> <div class="col-6"> <div class="card mb-3"> <div class="card-header small"> <i class="far fa-check-square fa-fw"></i> Direction: row </div> <div class="card-body"> <!-- RADIOS IN ROW START --> <div class="sweetbox-group sweetbox-group-row"> <div class="sweetbox sweetbox-md"> <input type="checkbox" name="radio_row" id="radio_row_1" value="1" /> <label for="radio_row_1">0-1 month</label> </div> <div class="sweetbox sweetbox-md"> <input type="checkbox" name="radio_row" id="radio_row_2" value="2" /> <label for="radio_row_2">1-5 months</label> </div> <div class="sweetbox sweetbox-md"> <input type="checkbox" name="radio_row" id="radio_row_3" value="3" /> <label for="radio_row_3">5-10 months</label> </div> <div class="sweetbox sweetbox-md"> <input type="checkbox" name="radio_row" id="radio_row_4" checked="checked" value="4" /> <label for="radio_row_4">10 months and more</label> </div> </div> <!-- EOF RADIOS IN ROW --> </div> </div> </div> <div class="col-6"> <div class="card mb-3"> <div class="card-header small"> <i class="far fa-dot-circle fa-fw"></i> Sizes: SM, MD / default, LG, XL </div> <div class="card-body"> <!-- RADIOS SIZES --> <div class="sweetbox-group sweetbox-group-column"> <div class="sweetbox sweetbox-sm"> <input type="radio" name="inp_size" id="inp_size_sm" value="1" /> <label for="inp_size_sm">.sweetbox-sm</label> </div> <div class="sweetbox"> <input type="radio" name="inp_size" id="inp_size" value="2" /> <label for="inp_size"><em>no additional class</em></label> </div> <div class="sweetbox sweetbox-md"> <input type="radio" name="inp_size" id="inp_size_md" value="3" /> <label for="inp_size_md">.sweetbox-md</label> </div> <div class="sweetbox sweetbox-lg"> <input type="radio" name="inp_size" id="inp_size_lg" value="4" /> <label for="inp_size_lg">.sweetbox-lg</label> </div> <div class="sweetbox sweetbox-xl"> <input type="radio" name="inp_size" id="inp_size_xl" value="5" /> <label for="inp_size_xl">.sweetbox-xl</label> </div> </div> <!-- EOF RADIOS SIZES --> </div> </div> </div> <div class="col-6"> <div class="card mb-3"> <div class="card-header small"> <i class="far fa-check-square fa-fw"></i> Colors </div> <div class="card-body"> <div class="row"> <div class="col-6"> <!-- RADIOS COLORS --> <div class="sweetbox-group sweetbox-group-column"> <div class="sweetbox sweetbox-lg"> <input type="checkbox" name="rc" id="rc_0" value="1" /> <label for="rc_0"><em>no additional class</em></label> </div> <div class="sweetbox sweetbox-lg sweetbox-default"> <input type="checkbox" name="rc" id="rc_1" value="2" /> <label for="rc_1">.sweetbox-default</label> </div> <div class="sweetbox sweetbox-lg sweetbox-warning"> <input type="checkbox" name="rc" id="rc_2" value="2" /> <label for="rc_2">.sweetbox-warning</label> </div> <div class="sweetbox sweetbox-lg sweetbox-info"> <input type="checkbox" name="rc" id="rc_3" value="3" /> <label for="rc_3">.sweetbox-info</label> </div> <div class="sweetbox sweetbox-lg sweetbox-success"> <input type="checkbox" name="rc" id="rc_4" value="4" /> <label for="rc_4">.sweetbox-success</label> </div> <div class="sweetbox sweetbox-lg sweetbox-inverse"> <input type="checkbox" name="rc" id="rc_5" value="5" /> <label for="rc_5">.sweetbox-inverse</label> </div> <div class="sweetbox sweetbox-lg sweetbox-alt"> <input type="checkbox" name="rc" id="rc_6" value="6" /> <label for="rc_6">.sweetbox-alt</label> </div> </div> <!-- EOF RADIOS IN ROW --> </div> <div class="col-6"> <!-- RADIOS COLORS --> <div class="sweetbox-group sweetbox-group-column"> <div class="sweetbox sweetbox-lg"> <input type="checkbox" name="rcc" id="rcc_0" value="1" checked="checked" /> <label for="rcc_0"><em>no additional class</em></label> </div> <div class="sweetbox sweetbox-lg sweetbox-default"> <input type="checkbox" name="rcc" id="rcc_1" value="2" checked="checked" /> <label for="rcc_1">.sweetbox-default</label> </div> <div class="sweetbox sweetbox-lg sweetbox-warning"> <input type="checkbox" name="rcc" id="rcc_2" value="2" checked="checked" /> <label for="rcc_2">.sweetbox-warning</label> </div> <div class="sweetbox sweetbox-lg sweetbox-info"> <input type="checkbox" name="rcc" id="rcc_3" value="3" checked="checked" /> <label for="rcc_3">.sweetbox-info</label> </div> <div class="sweetbox sweetbox-lg sweetbox-success"> <input type="checkbox" name="rcc" id="rcc_4" value="4" checked="checked" /> <label for="rcc_4">.sweetbox-success</label> </div> <div class="sweetbox sweetbox-lg sweetbox-inverse"> <input type="checkbox" name="rcc" id="rcc_5" value="5" checked="checked" /> <label for="rcc_5">.sweetbox-inverse</label> </div> <div class="sweetbox sweetbox-lg sweetbox-alt"> <input type="checkbox" name="rcc" id="rcc_6" value="6" checked="checked" /> <label for="rcc_6">.sweetbox-alt</label> </div> </div> <!-- EOF RADIOS IN ROW --> </div> </div> </div> </div> </div> <div class="col-6"> <div class="card mb-3"> <div class="card-header small"> <i class="far fa-dot-circle fa-fw"></i> Direction: column </div> <div class="card-body"> <!-- RADIOS VARIATIONS --> <div class="sweetbox-group sweetbox-group-column"> <div class="sweetbox sweetbox-sm sweetbox-cbx"> <input type="radio" name="rv" id="rv1" value="1" /> <label for="radio_col_1">Lorem ipsum dolor sit amet</label> </div> <div class="sweetbox sweetbox-md sweetbox-cbx"> <input type="radio" name="rv" id="rv2" value="2" /> <label for="radio_col_2">Consectetur adipiscing elit</label> </div> <div class="sweetbox sweetbox-lg sweetbox-cbx"> <input type="radio" name="rv" id="rv3" value="3" /> <label for="radio_col_3">Curabitur vitae laoreet orci</label> </div> <div class="sweetbox sweetbox-xl sweetbox-cbx"> <input type="radio" name="rv" id="rv4" checked="checked" value="4" /> <label for="radio_col_4">Eu pellentesque ipsum</label> </div> </div> <!-- EOF RADIOS VARIATIONS --> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="bd-callout bd-callout-info bg-light px-4 py-3"> <h4>Usage:</h4> <ol> <li class="pt-4"> <h6>Basic usage:</h6> <code> <div class="<strong>sweetbox-group</strong> <strong>sweetbox-group-column</strong>"><br>   <div class="<strong>sweetbox</strong>"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> <em><strong>.sweetbox-group</strong></em> class is obligatory. Defines custom radio and checkbox group<br> <em><strong>.sweetbox-group-column</strong></em> or <em><strong>sweetbox-group-row</strong></em> defines direction of inputs<br><br> <em><strong>.sweetbox</strong></em> class is obligatory. Defines custom radio and checkbox element<br> </div> </li> <li class="pt-4"> <h6>Sizing:</h6> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox <strong>sweetbox-sm</strong>"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> <em><strong>.sweetbox-sm</strong></em> small input<br> <em><strong>.sweetbox-md</strong></em> medium input (default size)<br> <em><strong>.sweetbox-lg</strong></em> large input<br> <em><strong>.sweetbox-xl</strong></em> extra-large input<br><br> </div> </li> <li class="pt-4"> <h6>Colors:</h6> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox <strong>sweetbox-danger</strong>"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> <em><strong>.sweetbox-default</strong></em> (or not defined) light grey<br> <em><strong>.sweetbox-invert</strong></em> dark grey<br> <em><strong>.sweetbox-warning</strong></em> orange<br> <em><strong>.sweetbox-danger</strong></em> red<br> <em><strong>.sweetbox-info</strong></em> blue<br> <em><strong>.sweetbox-success</strong></em> green<br> <em><strong>.sweetbox-alt</strong></em> violet<br> </div> </li> <li class="pt-4"> <h6>Variations:</h6> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox <strong>sweetbox-cbx</strong>"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> <em><strong>not defined</strong></em> oval box with circle button<br> <em><strong>.sweetbox-cbx</strong></em> rectangle box with slightly rounded corners and square button with sligtly rounded corners<br> </div> </li> </ol> <h4>Examples:</h4> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> Blue, Oval, large buttons </div> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox sweetbox-lg sweetbox-info"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <hr> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> Dark, rectalnge, small buttons </div> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox sweetbox-sm sweetbox-invert sweetbox-cbx"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1st" value="my_value" /><br>     <label for="my_radio_id_1st">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> <hr> <div class="alert alert-light small my-1 py-1 px-2" role="alert"> Mixed styles </div> <code> <div class="sweetbox-group sweetbox-group-column"><br>   <div class="sweetbox sweetbox-md sweetbox-alt"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_1" value="my_value_1" /><br>     <label for="my_radio_id_1">Lorem ipsum dolor sit amet</label><br>   </div><br><br>   <div class="sweetbox sweetbox-lg sweetbox-warning"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_2" value="my_value_2" /><br>     <label for="my_radio_id_2">Lorem ipsum dolor sit amet</label><br>   </div><br><br>   <div class="sweetbox sweetbox-md sweetbox-default"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_3" value="my_value_3" /><br>     <label for="my_radio_id_3">Lorem ipsum dolor sit amet</label><br>   </div><br><br>   <div class="sweetbox sweetbox-sm sweetbox-danger"><br>     <input type="radio" name="my_radio_name" id="my_radio_id_4" value="my_value_4" /><br>     <label for="my_radio_id_4">Lorem ipsum dolor sit amet</label><br>   </div><br> </div> </code> </div> </div> </div> </div>

.sweetbox-group { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: space-between; } .sweetbox-group.sweetbox-group-row { flex-direction: row; } .sweetbox-group.sweetbox-group-column { flex-direction: column; } .sweetbox-group.sweetbox-group-row > .sweetbox { align-self: center; } .sweetbox-group.sweetbox-group-column > .sweetbox { align-self: flex-start; width: 100%; } .sweetbox-group > .sweetbox { flex-grow: 1; flex-shrink: 1; } .sweetbox-group > .sweetbox > input[type="radio"], .sweetbox-group > .sweetbox > input[type="checkbox"] { display: none; } /* SMALL */ .sweetbox-group > .sweetbox.sweetbox-sm > label { position: relative; height: 10px; font-size: 9px; line-height: 10px; text-indent: 24px; } .sweetbox-group > .sweetbox.sweetbox-sm > label:before { content: ""; position: absolute; top: 0; left: 0; height: 10px; width: 20px; border-radius: 5px; } .sweetbox-group > .sweetbox.sweetbox-sm > label:after { content: ""; position: absolute; height: 6px; width: 6px; border-radius: 3px; top: 0px; left: 0px; margin: 2px; animation: toggletick2r-sm 600ms 1; transition: all 600ms; } .sweetbox-group > .sweetbox.sweetbox-sm > input:checked + label:after { left: 10px; animation: toggletick2l-sm 600ms 1; transition: all 600ms; } @keyframes toggletick2l-sm { 0% { width: 6px; left: 0; } 50% { width: 16px; left: 0; } 100% { width: 6px; left: 10px; } } @keyframes toggletick2r-sm { 0% { width: 6px; left: 10px; } 50% { width: 16px; left: 0; } 100% { width: 6px; left: 0px; } } /* MEDIUM | default */ .sweetbox-group > .sweetbox > label, .sweetbox-group > .sweetbox.sweetbox-md > label { position: relative; height: 12px; font-size: 11px; line-height: 12px; text-indent: 28px; } .sweetbox-group > .sweetbox > label:before, .sweetbox-group > .sweetbox.sweetbox-md > label:before { content: ""; position: absolute; top: 0; left: 0; height: 12px; width: 24px; border-radius: 6px; } .sweetbox-group > .sweetbox > label:after, .sweetbox-group > .sweetbox.sweetbox-md > label:after { content: ""; position: absolute; height: 8px; width: 8px; border-radius: 5px; top: 0px; left: 0px; margin: 2px; animation: toggletick2r-md 600ms 1; transition: all 600ms; } .sweetbox-group > .sweetbox > input:checked + label:after, .sweetbox-group > .sweetbox.sweetbox-md > input:checked + label:after { left: 12px; animation: toggletick2l-md 600ms 1; transition: all 600ms; } @keyframes toggletick2l-md { 0% { width: 8px; left: 0; } 50% { width: 20px; left: 0; } 100% { width: 8px; left: 12px; } } @keyframes toggletick2r-md { 0% { width: 8px; left: 12px; } 50% { width: 20px; left: 0; } 100% { width: 8px; left: 0px; } } /* LARGE | default */ .sweetbox-group > .sweetbox.sweetbox-lg > label { position: relative; height: 16px; font-size: 14px; line-height: 16px; text-indent: 36px; } .sweetbox-group > .sweetbox.sweetbox-lg > label:before { content: ""; position: absolute; top: 0; left: 0; height: 16px; width: 32px; border-radius: 8px; } .sweetbox-group > .sweetbox.sweetbox-lg > label:after { content: ""; position: absolute; height: 12px; width: 12px; border-radius: 6px; top: 0px; left: 0px; margin: 2px; animation: toggletick2r-lg 600ms 1; transition: all 600ms; } .sweetbox-group > .sweetbox.sweetbox-lg > input:checked + label:after { left: 16px; animation: toggletick2l-lg 600ms 1; transition: all 600ms; } @keyframes toggletick2l-lg { 0% { width: 12px; left: 0; } 50% { width: 28px; left: 0; } 100% { width: 12px; left: 16px; } } @keyframes toggletick2r-lg { 0% { width: 12px; left: 16px; } 50% { width: 28px; left: 0; } 100% { width: 12px; left: 0px; } } /* X-LARGE | default */ .sweetbox-group > .sweetbox.sweetbox-xl > label { position: relative; height: 20px; font-size: 16px; line-height: 20px; text-indent: 44px; } .sweetbox-group > .sweetbox.sweetbox-xl > label:before { content: ""; position: absolute; top: 0; left: 0; height: 20px; width: 40px; border-radius: 10px; } .sweetbox-group > .sweetbox.sweetbox-xl > label:after { content: ""; position: absolute; height: 16px; width: 16px; border-radius: 8px; top: 0px; left: 0px; margin: 2px; animation: toggletick2r-xl 600ms 1; transition: all 600ms; } .sweetbox-group > .sweetbox.sweetbox-xl > input:checked + label:after { left: 20px; animation: toggletick2l-xl 600ms 1; transition: all 600ms; } @keyframes toggletick2l-xl { 0% { width: 16px; left: 0; } 50% { width: 36px; left: 0; } 100% { width: 16px; left: 20px; } } @keyframes toggletick2r-xl { 0% { width: 16px; left: 20px; } 50% { width: 36px; left: 0; } 100% { width: 16px; left: 0px; } } /* default color */ .sweetbox-group > .sweetbox > label, .sweetbox-group > .sweetbox.sweetbox-default > label { color: #CED4DA; } .sweetbox-group > .sweetbox > input:checked + label, .sweetbox-group > .sweetbox.sweetbox-default > input:checked + label { color: #6C757D; } .sweetbox-group > .sweetbox > label:before, .sweetbox-group > .sweetbox.sweetbox-default > label:before { background-color: #E9ECEF; border: 1px solid #DEE2E6; } .sweetbox-group > .sweetbox > input:checked + label:before, .sweetbox-group > .sweetbox.sweetbox-default > input:checked + label:before { background-color: #CED4DA; border: 1px solid #ADB5BD; } .sweetbox-group > .sweetbox > label:after, .sweetbox-group > .sweetbox.sweetbox-default > label:after { background-color: #CED4DA; } .sweetbox-group > .sweetbox > input:checked + label:after, .sweetbox-group > .sweetbox.sweetbox-default > input:checked + label:after { background-color: #6C757D; } /* INFO color */ .sweetbox-group > .sweetbox.sweetbox-info > label { color: #ADE8F4; } .sweetbox-group > .sweetbox.sweetbox-info > input:checked + label { color: #48CAE4; } .sweetbox-group > .sweetbox.sweetbox-info > label:before { background-color: #EDFAFD; border: 1px solid #C8F0F9; } .sweetbox-group > .sweetbox.sweetbox-info > input:checked + label:before { background-color: #ADE8F4; border: 1px solid #90E0EF; } .sweetbox-group > .sweetbox.sweetbox-info > label:after { background-color: #ADE8F4; } .sweetbox-group > .sweetbox.sweetbox-info > input:checked + label:after { background-color: #48CAE4; } /* WARNING color */ .sweetbox-group > .sweetbox.sweetbox-warning > label { color: #FFE099; } .sweetbox-group > .sweetbox.sweetbox-warning > input:checked + label { color: #FF9E1F; } .sweetbox-group > .sweetbox.sweetbox-warning > label:before { background-color: #FFF9EB; border: 1px solid #FFEDC2; } .sweetbox-group > .sweetbox.sweetbox-warning > input:checked + label:before { background-color: #FFD899; border: 1px solid #FFAF47; } .sweetbox-group > .sweetbox.sweetbox-warning > label:after { background-color: #FFE099; } .sweetbox-group > .sweetbox.sweetbox-warning > input:checked + label:after { background-color: #FF9E1F; } /* DANGER color */ .sweetbox-group > .sweetbox.sweetbox-danger > label { color: #F3BFB9; } .sweetbox-group > .sweetbox.sweetbox-danger > input:checked + label { color: #E77F73; } .sweetbox-group > .sweetbox.sweetbox-danger > label:before { background-color: #FCEFEE; border: 1px solid #F6CFCB; } .sweetbox-group > .sweetbox.sweetbox-danger > input:checked + label:before { background-color: #F6CFCB; border: 1px solid #EA8F85; } .sweetbox-group > .sweetbox.sweetbox-danger > label:after { background-color: #F3BFB9; } .sweetbox-group > .sweetbox.sweetbox-danger > input:checked + label:after { background-color: #E77F73; } /* SUCCESS color */ .sweetbox-group > .sweetbox.sweetbox-success > label { color: #B6E2C9; } .sweetbox-group > .sweetbox.sweetbox-success > input:checked + label { color: #52B788; } .sweetbox-group > .sweetbox.sweetbox-success > label:before { background-color: #EFFAF1; border: 1px solid #D3EEDC; } .sweetbox-group > .sweetbox.sweetbox-success > input:checked + label:before { background-color: #C4E8D0; border: 1px solid #99D6B4; } .sweetbox-group > .sweetbox.sweetbox-success > label:after { background-color: #B6E2C9; } .sweetbox-group > .sweetbox.sweetbox-success > input:checked + label:after { background-color: #52B788; } /* INVERSE color */ .sweetbox-group > .sweetbox.sweetbox-inverse > label { color: #6C757D; } .sweetbox-group > .sweetbox.sweetbox-inverse > input:checked + label { color: #ADB5BD; } .sweetbox-group > .sweetbox.sweetbox-inverse > label:before { background-color: #ADB5BD; border: 1px solid #6C757D; } .sweetbox-group > .sweetbox.sweetbox-inverse > input:checked + label:before { background-color: #495057; border: 1px solid #343A40; } .sweetbox-group > .sweetbox.sweetbox-inverse > label:after { background-color: #6C757D; } .sweetbox-group > .sweetbox.sweetbox-inverse > input:checked + label:after { background-color: #ADB5BD; } /* ALT color */ .sweetbox-group > .sweetbox.sweetbox-alt > label { color: #DCC4E9; } .sweetbox-group > .sweetbox.sweetbox-alt > input:checked + label { color: #B185DB; } .sweetbox-group > .sweetbox.sweetbox-alt > label:before { background-color: #F6F1F9; border: 1px solid #EDE1F4; } .sweetbox-group > .sweetbox.sweetbox-alt > input:checked + label:before { background-color: #E5D2EE; border: 1px solid #D9C3EA; } .sweetbox-group > .sweetbox.sweetbox-alt > label:after { background-color: #DCC4E9; } .sweetbox-group > .sweetbox.sweetbox-alt > input:checked + label:after { background-color: #B185DB; } /* VARIATIONS */ .sweetbox-group > .sweetbox.sweetbox-cbx > label:before { border-radius: 4px; } .sweetbox-group > .sweetbox.sweetbox-cbx > label:after { border-radius: 2px; }