Checkbox change blue color

Trevor

#250053

A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

.searchandfilter[data-sf-form-id="1428"] .select2-container {
  margin: 5px;
}

So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

Anonymous

#250072

This reply has been marked as private.

Trevor

#250109

Yes, that blue tick is the ‘new’ standard browsers now use. Certainly all the ones I have tried do the same.

If your CSS is trying to change that, it will not work. Your only alternative is to use CSS tricks to hide the checkbox and replace it with an icon that you prefer. Such as shown here:

https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-buttons-and-checkboxes

Anonymous

#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;

Trevor

#250275

You are using border to ‘draw’ the checkbox. But you cannot then add the check mark to it. CSS cannot do that. You would need to use icons, like font-awesome.

Anonymous

#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;
}

Trevor

#250315

Thanks for letting me know. I will close this thread for now.

[Author]

Posts