Radio Button CSS Help

API & Customization
1

I am really close with this radio button styling but cannot for the life of me get the background colour to persist when selected. 

![](upload://yj6eI8SWrlPgzlVX2cMUrjU0ldL.png)

 

Here is the CSS - any thoughts?

 

.kn-radio {
margin: 10px;
}

.kn-radio input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}

.kn-radio label {
display: flex;
flex-direction: row;
padding: 10px 40px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}

.kn-radio label:hover {
background-color: #2e7ab4;

}

.kn-radio input[type="radio"]:focus {
border-color: #4c4;
}
.kn-radio input[type="radio"]:checked {
background-color: #2e7ab4!important;
border-color: #4c4;
}
#kn-input-field_109
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_110
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_111
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_112
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}

2

Awesome John!

3

Here it is folks - clean and synthesized. I'm just adding all of the code form my app which includes some header/menu/footer styling I found on here a while back. Here is the result:

![](upload://6vh0VtZgSGOszMuYAcC2Li7tseO.png)

________________________________________________________________

JS

________________________________________________________________

// Add footer //
$(document).on('knack-scene-render.any', function(event, page) {
/*
* Updates the css for the selected radio button in a given group
*/
function updateSelection(e) {
var elm = e.target;
$(elm).parents('.kn-radio').find('.selected-radio').removeClass('selected-radio');
$(elm).parent().addClass('selected-radio');
}

// listener for the radio buttons
$("input[name=view_8-field_40]").on('click', updateSelection);
$("input[name=view_11-field_44]").on('click', updateSelection);
});

_________________________________________________________________________

CSS

_________________________________________________________________________

header .kn-container{
align-items: center;
display:flex;
justify-content: space-between;
}

.kn-content header a.kn-title{
border: 0;
margin-bottom: 0;
padding:0;
}

.kn-info-bar{
background-color: transparent;
border-bottom: 1px solid #dbdbdb;
}

#kn-app-menu nav.tabs li a{
background-color:transparent;
transition: all 0.5s;
}
#kn-app-menu nav.tabs li.is-active a{
color: #D0063F !important;
}

#kn-app-menu nav.tabs li a:hover{
color: #D0063F !important;
}

li.kn-form-col.column.is-constrained, #connection-picker-radio-field_40 {
width:100%;
max-width:100%;
}

.kn-button {
display: flex;
width: 100%;
}
.kn-table td {border: 0px solid #fbf7f7;}
.bordered th {
border-width: 0px;}
.kn-radio {
margin: 10px;
}
input[type=radio] {
visibility:hidden;
}

.kn-radio label {
text-align:center;
display: flex;
flex-direction: row;
width:100%;
padding: 10px 40px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
margin-bottom:15px;
}

.selected-radio {
background-color: #2e7ab4 !important;
border-color: #444;
color:#FFF;
}

.kn-radio label:hover {
background-color: #2e7ab4;
border-color: #444;
color:#FFF;
}

.kn-radio input[type="radio"]:focus {
border-color: #444;
}

4

I broke mine too trying to add some additional styling! I will get an update in the next day or two and post here. Hoping for something with buttons that span the modal and are stacked and also some code that's easier to implement. Stay tuned. 

5

Awesome John, certainly a big improvement for mobile UI over radio inputs.

Converted them to toggle buttons!

Thanks for sharing.

6

Success! (with developer intervention - I was lost). There is certainly more styling I would like to do like making the buttons full width and stacked but regardless the usability we've added to radio buttons for mobile devices is great. thanks for all the feedback. CSS & JS below. 

 

 

![](upload://2zAgqJpuvdDn7zO06nvOwpoujXh.png)

 

CSS

 

.kn-radio {
margin: 10px;
}
input[type=radio] {
visibility:hidden;
}

.kn-radio label {
display: flex;
flex-direction: row;
padding: 10px 40px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}

.selected-radio {
background-color: #2e7ab4 !important;
border-color: #444;
color:#FFF;
}

.kn-radio label:hover {
background-color: #2e7ab4;
border-color: #444;
color:#FFF;
}

.kn-radio input[type="radio"]:focus {
border-color: #444;
}
#kn-input-field_109
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_110
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_111
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}
#kn-input-field_112
.kn-radio {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.control {
margin-right: .5em;
}

 

JS

 

* Updates the css for the selected radio button in a given group
*/
function updateSelection(e) {
var elm = e.target;
$(elm).parents('.kn-radio').find('.selected-radio').removeClass('selected-radio');
$(elm).parent().addClass('selected-radio');
}

// listener for the radio buttons
$("input[name=view_57-field_109]").on('click', updateSelection);

$("input[name=view_57-field_110]").on('click', updateSelection);

$("input[name=view_57-field_111]").on('click', updateSelection);

$("input[name=view_57-field_112]").on('click', updateSelection);

$('#myfooter').remove();
$('<div style="width:100%;hieght:300px;text-align:center;color:#333;background-color: #f3f3f3 !important" id="myfooter" >powered by SAMPLE TEXT</div>').insertAfter($("#knack-body"));
});

7

I worked on this for an hour and half before I threw my hands up. I couldn't not figure out for the life of me why I couldn't get it to sustain the clicked color. Please post the solution when you figure it out, i'm gonna give it another shot later this week when i have time if there is still no solution. Pseudo class stuff at this level is still hard for me to wrap my head around

8

Thanks for the feedback Brad! I must say I have reached the outer limits of my capabilities here so will work with one of my devs to get this across the finish line and will update the post accordingly. This can go a long way in trying to get Knack more more usable on mobile devices. 

9

Hi John,

Haven't tested your code but I suspect that because you're styling the input labels and hiding the controls, you'll need to utilise some Javascript to respond to a label click.

I'm thinking that when the radio is checked, to add a class to the label, and have that class defined in your CSS to appear selected.  The code will also need to remove the '.selected' class from other labels.

Looks very cool and the utility of this is obvious.

 

10

hover state does work

![](upload://mAFcmbqnIKfEobDAVzNsvR4GcFF.png)