UserImage.jpg
J K
27Views
7Comments
Border on radio button
Question
UI
CSS

i want to achieve radio button that looks something like this 

Not necessarily exact same but a brooder surrounding the whole option

Thanks!

0
0
08 Nov

Hi @J K,

I have used the below CSS and achieved the attached scenario. Kindly let us know if it helps.

 .radio-group .OSFillParent{       border: 2px solid grey;    border-radius: 25px;    padding: 10px;        width: max-content;}.radio-button:checked:before {    background-color: var(--color-neutral-0);    border: 6px solid grey;}

0
0
08 Nov

Hello Jerome,

This was very helpful, my main issue wasn't in the css itself but where to apply it and this cleared it up thanks!

I am still though not able to change the color once its selected would you know where I should be applying that styling 

0
0
09 Nov

Replying to J K's comment on 09 Nov 2023 09:10:41

HI @J K,

This CSS works for both selected and not selected.

Please find below the screenshot and link.


https://personal-9sfl6mfp.outsystemscloud.com/PincodeDemo/Screen1


0
0
09 Nov

Replying to Jerome Rajadurai J's comment on 09 Nov 2023 09:23:31

I Meant the background color changing on select 

0
0
09 Nov

Hi J K,


I hope you're doing well. My suggestion is to increase the border radius. 

i.e border-radius: 25px;

border-style: solid;

border-width: 1px;


I hope this will help a little bit. Play with CSS you'll get an idea.


Regards

Ankit S.

0
2
08 Nov

Hi JK,

Please have look at the attached OML for your reference.

check the employee detail screen css.

Hope it helps.

Thanks.

RadioGroupSampleSolution.oml
0
0
09 Nov

Hi J K,

this works : 

Dorine

1
0
09 Nov
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.