CSS question regarding radio buttons - Mendix Forum

CSS question regarding radio buttons

0

Hi,

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

https://codepen.io/samkeddy/pen/PbROLK

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

asked
3 answers
2

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.mendixcloud.com/link/questions/90713

answered
1

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. 

answered
1

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

answered