.mdl-radio { position: relative; line-height: 24px; display: inline-block; box-sizing: border-box; margin: 0; padding-left: 0; } .radio-label-block { display: flex; align-items: center; margin-top: .5em; margin-bottom: .5em; } .mdl-radio { padding-left: 24px; } .mdl-radio__button { line-height: 24px; position: absolute; /* 1px is for focusing purposes, so the focusManager doesn't skip over it */ width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; -ms-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; } .mdl-radio__outer-circle { position: absolute; top: 4px; left: 0; display: inline-block; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; border: 2px solid currentcolor; border-radius: 50%; z-index: 2; } .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle { border: 2px solid rgb(82, 181, 75); } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle { border: 2px solid rgba(0,0,0, 0.26); cursor: auto; } .mdl-radio__inner-circle { position: absolute; z-index: 1; margin: 0; top: 8px; left: 4px; box-sizing: border-box; width: 8px; height: 8px; cursor: pointer; transition-duration: 0.28s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); border-radius: 50%; background: rgb(82, 181, 75); } .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { background: rgba(0,0,0, 0.26); cursor: auto; } .mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76); } .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { box-shadow: 0 0 0px 10px rgba(82, 181, 75, 0.26); } .mdl-radio__label { cursor: pointer; } .mdl-radio__button:disabled + .mdl-radio__label { color: rgba(0,0,0, 0.26); cursor: auto; }