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

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