Customise radio group in Oracle APEX
Instead of showing inbuilt radio group page item, developer can customise it using some CSS to give a attractive look in Oracle APEX page.
Below step can convert radio group to a pill button.
Now add below css to Inline CSS section in page properties to change the default UI of pill button.
.radio_group.apex-item-radio{
padding:10px;
box-shadow:inset 0px 0px 7px rgba(0,0,0,0.19);
border-radius:29px;
background:rgba(255,255,255,0.9);
}
.apex-item-option:first-child .u-radio{
border-top-left-radius:25px;
border-bottom-left-radius:25px;
}
.apex-item-group–rc input:checked+label{
outline:none;
background:linear-gradient(#2984d9, #056ac8) !important;
border-radius:25px !important;
}
.apex-item-option .u-radio{
background:transparent !important;
/*width:100px;*/
padding-top:10px !important;
padding-bottom:10px !important;
padding-left:25px !important;
padding-right:25px !important;
}
.apex-item-group–rc input+label{
box-shadow:none !important;
border:0 none !important;
font-size:16px !important;
}
This is our new pill button after adding the CSS.
