Liferay CheckBox/Radio Styling

Question

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?

Possible duplicate of https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css — Athul Nath, Feb 22 '18 at 11:54
I already checked that topic and I think it's not strictly related to this one — ndreuccio, Feb 22 '18 at 12:03

score 1 · Accepted Answer · answered Feb 22 '18 at 12:17

1

I think this css will solve your problem

 .checkbox span {
     font-size: 19px;
     color: #898787;
     position: relative;
     cursor: pointer;
     padding-left: 30px;
     line-height: 33px;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
}
.checkbox span:before {
     content: "";
     background-color: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #C6C6C6;
     display: inline-block;
     position: absolute;
     width: 34px;
     height: 32px;
     left: 0;
     margin-left: -16px;
     overflow: hidden;
}
 .checkbox input[type="checkbox"]:checked + span:before {
     background: blue;
     width: 34px;
     height: 32px;
}
.checkbox input[type="checkbox"]{
     width: 0;
 }

answered Feb 22 '18 at 12:17

Athul Nath

2,536
1
15
27

Anuresh thanks so much, it works quite smoothly I was getting crazy :D – ndreuccio Feb 22 '18 at 12:20
How I Could draw the "tick" into the checkbox? – ndreuccio Feb 22 '18 at 12:39
Instead of background color u have to call background IMG of small tick – Athul Nath Feb 22 '18 at 13:35

Liferay CheckBox/Radio Styling

1 Answers1