Liferay CheckBox/Radio Styling

Hello I'm trying to style a Liferay Checkbox, I can't edit the HTML so I have to work straight on the CSS but I can't style it properly, in particular I found a strange behaviour on :checked selector.

This is the HTML:

<div class="checkbox">
    <label for="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE">
        <input id="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE" name="_com_liferay_dynamic_data_lists_form_web_portlet_DDLFormPortlet_INSTANCE_qaCfYGoELD8F_ddm$$CheckBoxTest$ViVemTVR$0$$de_DE" type="checkbox" value="true"> CheckBox Test
            <span class="icon-asterisk text-warning"></span>
    </label>
</div>

And this is my CSS:

.checkbox input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #C6C6C6;
}

.checkbox:checked {
  background-color: blue;
  width: 12px;
  height: 12px;
  background-color: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #C6C6C6;
}

Is there any work-around to handle this?