Active Radio Button Styling

[tampalab]

Hi Ally,

By adding this code to custom css, hover styling looks perfect but I want to keep it if button is active.

/*Add styles hovering all labels*/
.iphorm-inner .iphorm_3_22-input-li label:hover {
border: 1px solid #f06278;
background-color: #f06278;
min-width:180px;

I tried to do something like below but not working. Could you please advise?

/*Add styles hovering all labels*/
.iphorm-inner .iphorm_3_22-input-li label a:active {
border: 1px solid #f06278;
background-color: #f06278;
min-width:180px;

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[tampalab]

Hi Allan,

I am using code below to add images to multiple choice element. I simply modified hover section in this code by adding this:

.iphorm-inner .iphorm_3_22-input-li label:hover,
.iphorm-inner .iphorm_3_22-input-li label:active { ... }

Now hover is working but active is not working 🙁


/*Add styles for all option labels*/
.iphorm-inner .iphorm_5_1-input-li label {
position: relative;
padding: 64px 10px 10px 10px;
min-width: 77px;
border: 1px solid #000;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/*Add styles hovering all labels*/
.iphorm-inner .iphorm_5_1-input-li label:hover {
border: 1px solid #E3CE1C;
background-color: #111;
}
/*Optional - Have the CheckBox or Multiple Choice box positioned top right. */
.iphorm-inner .iphorm_5_1-input-li div.radio, .iphorm-inner .iphorm_5_1-input-li div.checker, .iphorm-inner .iphorm_5_1-input-li input {
position: absolute;
top: 0;
right: 0;
margin: 0;
}
/*Optional - Extra space between Options */
.iphorm-inner .iphorm_5_1-input-li {
padding-right: 15px;
}
/*SEQUENCE*/
/*First option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_1_label {
background: #222 url(https://www.quform.com/wp-content/themes/quform/images/facebook-logo.png) no-repeat center 5px;
}
/*Second option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_2_label {
background: #222 url(https://www.quform.com/wp-content/themes/quform/images/twitter-logo.png) no-repeat center 5px;
}
/*Third option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_3_label {
background: #222 url(https://www.quform.com/wp-content/themes/quform/images/envato-logo.png) no-repeat center 5px;
}


[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[tampalab]

Hi Allan,

Unfortunatelly, it is not working either. You realized exactly what I am trying to do. I want to change image background color and dimension when it is checked. Sorry for confusing you 🙁

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts