Hi @wen90 ,
As per our understanding, you are looking for a UI change for radio buttons in the portal,
Initially the Default radio button's UI look like the below screenshot,
We can convert the YES/NO labels as buttons when the user will click on NO The label background will be RED and Green for YES,
To achieve the above UI, open the Code Editor and paste the CSS codes in the CSS file for the Page as per your element name, In our scenario the element names are as below you can change the as per your requirement.
label[for = cr82c_cardtype_0]
label[for = cr82c_cardtype_1]
The CSS code should be written in the CSS file for the Respective Web page as shown in the below screenshot,
/* hiding the Radio buttons */
#cr82c_cardtype_0,
#cr82c_cardtype_1{
display: none;
}
/* Custom css for labels */
label[for = cr82c_cardtype_0]{
background-color: rgb(0,221,255);
color: black;
padding: 3px 7px;
margin: 5px 8px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease-in;
}
label[for = cr82c_cardtype_1]{
background-color: rgb(0,221,255);
color: black;
padding: 3px 7px;
margin: 5px 8px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease-in;
}
label[for = cr82c_cardtype_0]:hover{
background: red;
color: white;
}
label[for = cr82c_cardtype_1]:hover{
background: rgb(0, 171, 0);
color: white;
}
Now we have to make these buttons clickable and interactive.
When the user will click on the label which will run in the background will click the respective Radio button, and will also remove the applied CSS for another label, so we will update the Javascript file using Code Editor with below code lines.
Using jQuery we can achieve this :
$(document).ready(()=>{
//by default card type is no hence
$("label[for = cr82c_cardtype_0]").css("background-color","red")
$("label[for = cr82c_cardtype_0]").css("color","white")
//when yes
$("label[for = cr82c_cardtype_1]").click(()=>{
$("#cr82c_cardtype_1").prop("checked",true)
$("label[for = cr82c_cardtype_1]").css("background-color","rgb(0, 171, 0)")
$("label[for = cr82c_cardtype_1]").css("color","white")
//removing the no lable css
$("label[for = cr82c_cardtype_0]").css("background-color","rgb(0,221,255)")
$("label[for = cr82c_cardtype_0]").css("color","black")
})
//when no
$("label[for = cr82c_cardtype_0]").click(()=>{
$("#cr82c_cardtype_0").prop("checked",true)
$("label[for = cr82c_cardtype_0]").css("background-color","red")
$("label[for = cr82c_cardtype_0]").css("color","white")
//Removing the yes lable css
$("label[for = cr82c_cardtype_1]").css("background-color","rgb(0,221,255)")
$("label[for = cr82c_cardtype_1]").css("color","black")
})
})
This results in full working custom buttons for Yes/No Radio Buttons,
If this answer helps, please mark it as an Accepted Solution so it would help others to find the solution.
Thanks!
Inogic Professional Service Division
An expert technical extension for your techno-functional business needs
Power Platform/Dynamics 365 CRM
Drop an email at crm@inogic.com
Service: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/
