Radio buttons CSS for wordpress elementor form markup


[type="radio"]:checked + label:before {
  background: #bc6060;
  box-shadow: 0 0 0 0.25em #000;
}
[type="radio"]:focus + label:after {
  content: '
[type="radio"]:checked + label:before {
background: #bc6060;
box-shadow: 0 0 0 0.25em #000;
}
[type="radio"]:focus + label:after {
content: '\0020\2190';
font-size: 1.5em;
line-height: 1;
vertical-align: -0.125em;
}
[type="radio"] {
border: 0; 
clip: rect(0 0 0 0); 
height: 1px; margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px;
}
label {
display: block;
cursor: pointer;
line-height: 2;
font-size: 1.2em;
}
[type="radio"] + label {
display: block;
}
[type="radio"] + label:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
2090'; font-size: 1.5em; line-height: 1; vertical-align: -0.125em; } [type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } label { display: block; cursor: pointer; line-height: 2; font-size: 1.2em; } [type="radio"] + label { display: block; } [type="radio"] + label:before { content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.25em; border-radius: 1em; border: 0.125em solid #fff; box-shadow: 0 0 0 0.15em #000; margin-right: 0.75em; transition: 0.5s ease all; }

Posted

in

,

by

Tags:

Comments

One response to “Radio buttons CSS for wordpress elementor form markup”

  1. Promise Avatar
    Promise

    Hi,

    Thank you for your piece of code. It is really helpful.

    Do you have for checkbob too?

    Regards.

Leave a Reply

Your email address will not be published. Required fields are marked *