Reputation: 11
For a contact form I use radio button with labels.
For the label I used:
background-image: url(https://www.dedroogbouwvloer.nl/wp-content/uploads/2016/03/css-keuze.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
background-position: 0 0;
-moz-user-select: none;
background-repeat: no-repeat;
-ms-user-select: none;
user-select: none;
line-height: 15px;
font-size: 15px;
padding-left: 20px;
height: 15px;
display: inline-block;
line-height: 15px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
For the radio button I used
input[type=radio]
position: absolute;
vertical-align: middle;
z-index: -1000;
cursor: pointer;
font-size: 15px;
left: -1000px;
background-position: 0 0;
background-repeat: no-repeat;
line-height: 15px;
display: inline-block;
overflow: hidden;
height: 15px;
padding-left: 20px;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
Problem is that I cannot click the radio button. Page on: https://www.dedroogbouwvloer.nl/prijscalculatie-droogbouwvloer/
Upvotes: 0
Views: 1562
Reputation: 1960
If i go to this page the radio buttons are clickable. Also in contact form 7 you make a radio button like this: [checkbox your-country "China" "India" "San Marino"]
Upvotes: 1