Custom Radio buttons help/get data from custom field

[George_Janos]

Hi Guys.

I would like to have a radio selection with the options good/fair/poor and relevant coloring based on option (green/yellow/red). Obviously i can set this up with the radio field and apply css to each option. Problem comes in with the amount of radios needed, I am writing an audit/checklist app so there are many fields to then style. I would like to set it up similarly to how bootstrap does it. (Checks and radios · Bootstrap v5.0)

I have tried using a label field and text filed set to label and added this code as the label:
"

    <div class="good">
    <input type="radio" name="sample" id="good" value="Good">
    <label for="good">Good</label><br>
    </div>
    
    <div class="fair">
    <input type="radio" name="sample" id="fair" value="Fair">
    <label for="fair">Fair</label><br>
    </div>
    
    <div class="poor">
    <input type="radio" name="sample" id="poor" value="Poor">
    <label for="poor">Poor</label>
    </div>
</div>

" The field displays and changes color but I am unable to get the value for that field now. I have tried using $_POST['field_name'] as done in PHP and it does not work, gives an undefined index. The value will be saved to the DB for another field. Is there a way to get the value?Is there another way to do this all together? I will post screenshots of what I am trying to achieve and what is achieved so far.

Thank you for any help.

What Is wanted and what is there:

[George_Janos]

EDIT: I have found a solution without having to use custom HTML. By targeting .scFormDataFontOdd input[type=“radio”] in the CSS I applied in a custom method, I was able to adjust the default radio buttons. To get their lables I used .scFormDataFontOdd input[type=“radio”][id$=“1”]+label.

Using CSS wildcard [id$=“1”] I was able to target all ID’s ending in 1 thus being the first option (good) and so forth.

The :before and :after as well as :checked options can be applied like such .scFormDataFontOdd input[type=“radio”][id$=“1”]+label:before
{ your:css;}

.scFormDataFontOdd input[type=“radio”][id$=“1”]:checked + label:before{
height: 5px;
width: 10px;
border: 5px solid grey;
background-color: #01cc65;
}

I Hope that this helps someone down the line.

[rik]

I’m looking for a similar solution myself.
Unfortunately, I didn’t know how to implement yours.
Could you please write more specifically where and what code to insert?
Thank you very much.

[George_Janos]

So basically we start off by making a standard radio field of course. I added 3 options good fair poor. I also added a method in the “onload event” to load styling. I then ran the application and used the inspection tool in the browser to see what ID/Class’s were assigned to them by SC. I noticed that all radio buttons where assigned the css class ".scFormDataFontOdd input[type=“radio”] " so I used this to start targeting the radios in the css rules. Next I noticed that SC id’d the radios by number where 1 is the 1st option. So I used the css wildcard “id$=the-required-option”. For example option “good” is first so I used “1”. I used the +label to target the styling for the labels. (Majority of they styling is on the labels, I used the CSS itself from a template on the web.) Please note that this only works if all your radio buttons on the page have the same answers. For example if I change radio 1 option 1 “yes” to be green then radio 2 option 1 “No” will also be green.

OnLoad Event

Example of the CSS

Please let me know if this is of any help. Or if there are any suggestions.

[rik]

Thank you very much for your very quick response and reply.
I’m almost at the finish.
I still have a little problem.
The radio icons remain visible to me.
Maybe you know what I’m doing wrong?

[rik]

But now it’s fine.
I changed the background of the button, position-top - xx
and added a white frame to the confirmed button.

Thanks again for your help.

Now I’m researching how to add more fa-icons to the label.

[George_Janos]

Glad I could be of assistance, let me know how the fa-icons go

[rik]

I don’t have a solution at this point.
I’ll post it here as soon as I have it.
Thanks for the help.