<fieldset>
<legend>Is this toggle switch awesome?</legend>
<div class="toggle">
<input type="radio" name="sizeBy" value="weight" id="sizeWeight" checked="checked" />
<label for="sizeWeight">It's pretty, pretty, pretty, pretty good</label>
<input type="radio" name="sizeBy" value="dimensions" id="sizeDimensions" />
<label for="sizeDimensions">100% yes</label>
</div>
<p class="status">Toggle is <span>auto width</span><span>full width</span>.</p>
</fieldset>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
/* VARS */
/* MIXINS */
/* STYLE THE HTML ELEMENTS (INCLUDES RESETS FOR THE DEFAULT FIELDSET AND LEGEND STYLES) */
body, html {
margin: 0;
padding: 1rem;
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
font-family: 'Open Sans', 'Helvetica', sans-serif;
-webkit-font-smoothing: antialiased;
background-color: #eee;
}
fieldset {
margin: 0;
padding: 2rem;
box-sizing: border-box;
display: block;
border: none;
border: solid 1px #ccc;
min-width: 0;
background-color: #fff;
}
fieldset legend {
margin: 0 0 1.5rem;
padding: 0;
width: 100%;
float: left;
display: table;
font-size: 1.5rem;
line-height: 140%;
font-weight: 600;
color: #333;
}
fieldset legend + * {
clear: both;
}
body:not(:-moz-handler-blocked) fieldset {
display: table-cell;
}
/* TOGGLE STYLING */
.toggle {
margin: 0 0 1.5rem;
box-sizing: border-box;
font-size: 0;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}
.toggle input {
width: 0;
height: 0;
position: absolute;
left: -9999px;
}
.toggle input + label {
margin: 0;
padding: 0.75rem 2rem;
box-sizing: border-box;
position: relative;
display: inline-block;
border: solid 1px #ddd;
background-color: #fff;
font-size: 1rem;
line-height: 140%;
font-weight: 600;
text-align: center;
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
/* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
/*flex: 0 0 50%;
display: flex;
justify-content: center;
align-items: center;
*/
/* ----- */
}
.toggle input + label:first-of-type {
border-radius: 6px 0 0 6px;
border-right: none;
}
.toggle input + label:last-of-type {
border-radius: 0 6px 6px 0;
border-left: none;
}
.toggle input:hover + label {
border-color: #213140;
}
.toggle input:checked + label {
background-color: #4b9dea;
color: #fff;
box-shadow: 0 0 10px rgba(102, 179, 251, .5);
border-color: #4b9dea;
z-index: 1;
}
.toggle input:focus + label {
outline: dotted 1px #ccc;
outline-offset: 0.45rem;
}
@media (max-width: 800px) {
.toggle input + label {
padding: 0.75rem 0.25rem;
flex: 0 0 50%;
display: flex;
justify-content: center;
align-items: center;
}
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
margin: 0;
font-size: 1rem;
font-weight: 400;
}
.status span {
font-weight: 600;
color: #b6985a;
}
.status span:first-of-type {
display: inline;
}
.status span:last-of-type {
display: none;
}
@media (max-width: 800px) {
.status span:first-of-type {
display: none;
}
.status span:last-of-type {
display: inline;
}
}