Active CSS form background

2 Views

I have a wordpress website and a form. I would like that when a radio button is active its background container would have a color background. I have successfully accomplished that with CSS with these two classes 

.ezfc-inline.ezfc-element-radio-container {
    display: inline-block;
    text-align: center;
}
.ezfc-inline.ezfc-element-radio-container:active {
    display: inline-block;
    text-align: center;
    background: none repeat scroll 0% 0% #105CAB;
    color: #FFF;
}

but the problem is that I have to physically hold the mouse button on the element to keep it active. As soon as I let go the background disappear.

Read More

Any input would be very appreciated.

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You just need to add the :checked state.

    .ezfc-inline.ezfc-element-radio-container {
  display: inline-block;
  text-align: center;
}

.ezfc-inline.ezfc-element-radio-container:active, .ezfc-inline.ezfc-element-radio-container .ezfc-element-radio input:checked {
  display: inline-block;
  text-align: center;
  background: none repeat scroll 0% 0% #105CAB;
color: #FFF;
}

    I’m not sure of your HTML structure but i would hazard a guess that the input is within the container class.

    You can read more about :checked elements HERE