CSS question regarding radio buttons - Mendix Forum

CSS question regarding radio buttons



I was trying to make an enumeration more intuitive, more like the example below


strangely the parts where a radio button is checked, it doesnt work.



all parts with + (plusses in them) seem to be left out

for example the part:

input[type=radio]:checked + label{



I hope someone can find out what I'm doing wrong.

The image below is what I get when I copy paste the code from the link, so it seems there is more css code left out.


The part of the code below, I can easily tweak, and adjust.

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;

label {
  color: lighten($bg,40%);
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;

For more information, please leave a comment

3 answers

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



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.



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. 


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:

    > label{
        display: none;
    > div{
        width: 100% !important;
        > div{
            display: inline-block;
            border: solid 3px #ccc;
            margin: 20px;
            border-radius: 10px;
            overflow: hidden;
                margin: 0 !important;
                padding:7px !important;
                overflow: hidden;
                border: solid 1px #ccc;
                background: transparent;                  
                    background: #ddd;
                    content: "";
                    width: 1000px;
                    height: 1000px;
                    background-color: #ddd;
                    display: block;
                    position: relative;
                    z-index: -1;


Hope this helps