at the moment radio button dom doesnt render as it should according to HTML guidelines making them frustrating to style.
Here's another post with some solutions, but they're all a bit "dirty". Hope this helps you out
https://forum.mendix.com/link/questions/90713
Hello Auke,
You're missing the styles for .radio-group which will most likely have to be applied for .form-group, you'll also have to change other of the target classes since the HTML structure is different for the Mendix enum. I've created a sample that would work like the radio group that you found.
Please see the bellow code (SCSS) - Sample is the class I've given to the radio button input:
.Sample{
> label{
display: none;
}
> div{
width: 100% !important;
> div{
display: inline-block;
border: solid 3px #ccc;
margin: 20px;
border-radius: 10px;
overflow: hidden;
label{
margin: 0 !important;
padding:7px !important;
overflow: hidden;
border: solid 1px #ccc;
background: transparent;
&:hover{
background: #ddd;
}
input:checked:after{
content: "";
width: 1000px;
height: 1000px;
background-color: #ddd;
display: block;
top:-50px;
position: relative;
z-index: -1;
}
}
}
}
}
Hope this helps
Hi Auke,
This is with only CSS not possible, you should check out the link that Jason mentions or create some own JavaScript / jQuery code or widget where it add's a span element around the text label.
In CSS3 there is no parent selector available to select the label element.
Cheers
EDIT: I find it always a challenge to figure it out and created a working version for Chrome and Firefox: http://ttps://codepen.io/JDraaijer/pen/NOBYoe. Edge is still buggy and for some reason I was not able to test it in IE 11.