You are viewing limited content. For full access, please sign in.

Question

Question

Change the color for radio buttons

Forms Version 11
Updated two days ago
asked on February 25

I'm looking into changing the color of all radio buttons and checkboxes on my form. I saw other post that almost had what I needed however it wasn't quite there. I have it working when the form is live and not in read-only mode. Is there a way to have the buttons have their color changed when read-only or when storing the repository?

/* All radio and checkboxes */
.cf-field input[type="checkbox"], .cf-field input[type="radio"] {accent-color: blue;!important}

 

0 0

Replies

replied on February 25

Heya Cristobal,

The semi-colon should actually be after the !important tag instead of after the value, like this:

{accent-color: blue !important;}

This may or may not be the cause of it. I know that previously I've ran into similar issues where things would render incorrectly in Read-Only and Live when using the !important tag, so hopefully this can point you in the right direction

1 0
View 3 previous replies
replied on March 3

Hi Andrew,

I ended up trying this

/* All radio and checkboxes */
.cf-field input[type="checkbox"]:checked + label { color: blue !important; font-weight: bold;}
.cf-field input[type="checkbox"] {accent-color: blue !important; }
.cf-field input[type="radio"]:checked + label {color: blue !important; font-weight: bold;}
.cf-field input[type="radio"] {accent-color: blue !important;}

The labels appear in bold after when the form is read-only however the radio buttons and checkboxes do not. I'm wondering if it is because the button/checkbox is in a disabled state.

0 0
replied on March 3

Hmm interesting. Are you using the modern or classic designer? I tested the CSS above in both a 10.4 and 11.0 forms and the text and buttons for both RB and Checkboxes turned blue on selection. Here's how it looks for me:

 

0 0
replied on March 4 • Show version history

It happens when the field is read-only in the classic version. The labels keep the color however the button itself gets greyed out.

0 0
replied on March 4

Hmm this may be a limitation of Chromium-based browsers or just how RB and CB fields work, where if they're read-only they can't be changed. I'm not too familiar with it and can't seem to find any definitive answers. I tried this though:

  /* All radio and checkboxes */
.cf-field input[type="checkbox"]:checked + label,
.cf-field input[type="radio"]:checked + label 
{
    color: blue !important;
    font-weight: bold;
}

.cf-field input[type="checkbox"],
.cf-field input[type="radio"],
.cf-field input[type="radio"][readonly],
.cf-field input[type="checkbox"][readonly]
{
    accent-color: blue !important;
}

Looking in the dev tools it says that it's enabled, but not sure why it isn't being changed on the form itself:

 

Hopefully someone else comes along and provide some insight into this as it's really interesting to know what can and can't be affected by the usual CSS for fields.

0 0
replied on April 22 • Show version history

I use the following code, with the background colour being white/black and the border being black. It saves to the repository nicely (even in b/w) and overrides read-only.

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: white;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid black;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: black;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid black;
    }

 

0 0
replied two days ago
0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...