x

Change color of checkboxes

I can't figure out the coding to change only the checkboxes to white (not the entire text)

Also, how do I delete the grey footer at the bottom?

My website is:

http://www.xceleratenetworks.properties/3033wilshire.html

4,657 Views
Message 1 of 16
Report
1 Best Answer

Best Answer

Ok. I see what's happening. Try this code and add it to the footer code field instead of header code:

<style>

.wsite-form-field input[type='radio'], .wsite-form-field input[type='checkbox'], .wsite-com-product-option-groups input[type='radio'], .wsite-com-product-option-groups input[type='checkbox'] {

border: 1px solid #ffffff !important;

}

</style>

View Best Answer >

5,363 Views
Message 16 of 16
Report
15 REPLIES 15

For your checkboxes you want something like:

input[type=checkbox] {

border-color: 1px solid #fffff !important

}

For your footer are you referring to that bit of white space on the bottom?

4,641 Views
Message 14 of 16
Report

For the footer, yes!

Also, when I put the coding into my header code, it didn't work. Any suggestions?

4,632 Views
Message 14 of 16
Report

Oh, you'll want to wrap it in style tags first like this before pasting it into the header code field:

<style>

input[type=checkbox] {

border-color: 1px solid #fffff !important

}

</style>

4,624 Views
Message 14 of 16
Report

I copy and pasted the code into my header code, and unfortunately that still doesn't work 😕

4,615 Views
Message 14 of 16
Report
Square

Did you publish and check the live site, @desiree_xn? Sometimes the code does not work in the editor, but will show up on the live site. 

4,602 Views
Message 14 of 16
Report

Yes I did!

4,594 Views
Message 14 of 16
Report

Oh, I forgot quotes. Try this instead:

<style>

input[type="checkbox"] {

border-color: 1px solid #fffff !important

}

</style>

4,587 Views
Message 14 of 16
Report

It still doesn't work...Smiley Frustrated

I so appreciate the help, though! I can make do with non-white checkboxes if it's not possible!

4,586 Views
Message 14 of 16
Report

It should be possible, so it might just be a mistake with my code. Where did you add the code, and after adding it did you publish?

4,575 Views
Message 14 of 16
Report

I inserted it:

Pages -> 3033 Wilshire -> SEO Settings -> Header Code

Then I publish (which I always do to see if my codes are working)

2,821 Views
Message 14 of 16
Report

Ok. Is the code still there? If not can you add it and publish again?

2,815 Views
Message 14 of 16
Report

Yes it is!

2,810 Views
Message 14 of 16
Report

Best Answer

Ok. I see what's happening. Try this code and add it to the footer code field instead of header code:

<style>

.wsite-form-field input[type='radio'], .wsite-form-field input[type='checkbox'], .wsite-com-product-option-groups input[type='radio'], .wsite-com-product-option-groups input[type='checkbox'] {

border: 1px solid #ffffff !important;

}

</style>

5,364 Views
Message 16 of 16
Report

I was able to use that code and fill in the background! Thank you!

The last thing I needed was to reduce the padding at the bottom of the page. I want to change the padding from 20px to 0px to remove it completely. Do you know how to do this?

2,792 Views
Message 16 of 16
Report

Great! I'm not sure how to remove that padding as it's being added inline. If you check your page templates do you see that inline styling there. It looks like it's a div that wraps the footer.

2,768 Views
Message 17 of 16
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.