Remember me

Checkbox Font Color

6 years 9 months ago #1

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi,
I couldn't fine a solution for the following, modifying the checkbox font color since it comes from the input font color and I need it to be different colors.

tinyurl.com/y9y5dl2c

I can see you can add class suffix but still, I couldn't make it work. I hope you can help please.

Regards.

6 years 9 months ago #2

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need at the Custom CSS file of your template add code:
.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
	color: inherit !important;
}

Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #3

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi Vyacheslav,
thanks for your answer. Look, I modified your code for color customization:

.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
color: #ffffff !important;
}

Since I want the text in the options to be white, because of the dark blue background, but didn't work. What am I doing wrong? Thanks again for your help.

6 years 9 months ago #4

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
To change the font color, you can use the "Inputs Options".

And change the color in the code, that we wrote to you, you change the color icon "check"

Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #5

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi,
please I didn't explain well myself. Please check attachment. The text inside the red area is the one I need to change to white.

6 years 9 months ago #6

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
At the "Form Options" > "Inputs Options" change font color to FFF


Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #7

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi Vyacheslav,
if I do it that way, all input text becomes white, so you can't read what's inside the other fields. I left your suggestion saved, so you can see it yourself. Try to fill the "Telefono" field for example, please.

6 years 9 months ago #8

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
At the options for input select the color what you need and remove your code:
.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
    color: #ffffff !important;
}

and add code:
.ba-form .ba-chekInline.seleccion .ba-chekInline div > span {
	color: #fff !important;
}

.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
    color: #25538f !important;
}

Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #9

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hello,
I followed your instructions but the text next to the checkbox still shows with the same text color than the value in input font color set at Forms.

6 years 9 months ago #10

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

Sorry, it's my mistake :(

For the font to be white need add code :
.ba-form .seleccion div > span {
    color: #fff !important;
}

Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #11

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi Vyacheslav,
no problem, I really appreciate your effort. Look, I added the code and I can see it changes its color when I'm in the Gridbox Editor but in the front end, it doesn't. I have removed the Form and added it again but it didn't work either. I never saw something like this.

Current custom code is:


.ba-form .ba-chekInline.seleccion .ba-chekInline div > span {
color: #fff !important;
}

.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
color: #25538f !important;
}

.ba-form .seleccion div > span {
color: #fff !important;
}

Sorry for asking for your help, I hope we are closed to the solution.

6 years 9 months ago #12

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
If color changes at Gridbox Editor, but does not change in the front end
Probably this is a problem with the browser cache or on your site.
Try clearing the cache


You can delete this code in it was an error:
.ba-form .ba-chekInline.seleccion .ba-chekInline div > span {
color: #fff !important;
}

Regards,
Vyacheslav, Balbooa.com

6 years 9 months ago #13

  • Alex Chavez's Avatar
  • Alex Chavez
  • Posts: 132
Hi Vyacheslav,
thanks, it's working now. I have already tried forced reload, without cache, and had not worked, I think the final solution was to remove the extra wrong code. Final code for anyone else who may need it in future is:

.ba-form .ba-chekInline.seleccion input[type="checkbox"]:checked + span:after {
color: #25538f !important;
}

.ba-form .seleccion div > span {
color: #fff !important;
}

Change color as desired. Thanks for help.

Regards.

6 years 9 months ago #14

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
You are welcome ;)

Regards,
Vyacheslav, Balbooa.com
Powered by Kunena Forum