Cecilia Arditto in reply to:
Checkbox change blue color

#250307

OK! Understood. I will keep the current design with the blocks. It looks very nice too. I adjusted the margins of the check mark. It works perfect.
Thanks a lot for your guidance! Have a nice weekend!

This is the final result:

.searchandfilter input.sf-input-checkbox[type=checkbox] + .sf-label-checkbox:before {
content:””;
display:inline-block;
top: -3px;
width: 12px;
height: 12px;
margin-right: 10px;
border: 1px solid #b4b4b4;
border-radius: 3px;
}

.searchandfilter input.sf-input-checkbox[type=checkbox]:checked + .sf-label-checkbox:before {
margin: -3px 10px 2px 3px;
width: 5px;
height: 9px;
border: solid #000;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
border-radius: 0;
}

.searchandfilter input.sf-input-checkbox {
display: none;
}

Add New Note to this Reply

Cecilia Arditto in reply to:
Checkbox change blue color

#250252

Thanks a lot Trevor! Your solution works very well. There is no way to change the CSS, but to design the checkbox again. I still need some css help.
I´ve been able to add my own checkbox (as similar as the default one I could, but without the blue) and I hided the old one but keeping its function (that works great!). I designed the check mark I want but when “checked” I can not make the check mark and the box display together (i see one or the other). Any tip?
Have a good day!

.searchandfilter input.sf-input-checkbox[type=checkbox] + .sf-label-checkbox:before {
  content:"";
  display:inline-block;
  top: -3px;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
}

.searchandfilter input.sf-input-checkbox[type=checkbox]:checked + .sf-label-checkbox:before {
display:inline-block;
  top: -3px;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
}
	
.searchandfilter input.sf-input-checkbox {
  display: none;
}

AND HERE THE CHECKMARK I WANT (as similar as default as i could)

margin: -3px 10px 0px 3px;
width: 5px;
height: 9px;
border: solid #000;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
border-radius: 0;

Add New Note to this Reply

Cecilia Arditto in reply to:
Checkbox change blue color

#250072

This reply has been marked as private.

Add New Note to this Reply

[Author]

Posts