VPS business hosting starting at $29.95/24/7 premium technical support

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; }

Author: Harshvardhan Malpani

PHP Developer based in New Delhi, India. Working as a freelance web developer providing server deployment, website development and maintenance services.

One thought on “Radio buttons CSS for wordpress elementor form markup”

Leave a Reply

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