Checkbox change blue color

Anonymous

#250044

Good afternoon!
I have a checkbox for a Post Grid that works excellent. But I have a css problem.
I would like to change the background blue color of the checkbox to white (as it was before) when checked and the check mark to black (as it was before, keeping it minimal)
I am using Post grid + Elementor + Astra Child theme
I change S&F to Select2 option, try to modify the css via my style sheet, but nothing happens. Display option is Custom with the weblink.
I tried in a different browser but no change at all.
I’ve been through your documentation but i didn’t find a solution that works for me.

Another related question:
Is there a way to allow S&F use Astra child theme automatically?
Thanks in advance!
Cecilia

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