.mdl-radio { position: relative; line-height: 24px; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-left: 24px } .radio-label-block { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-top: .5em; margin-bottom: .5em } .mdl-radio__button { line-height: 24px; position: absolute; 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; -webkit-box-sizing: border-box; box-sizing: border-box; width: 16px; height: 16px; margin: 0; cursor: pointer; border: 2px solid currentcolor; -webkit-border-radius: 50%; border-radius: 50%; z-index: 2 } .mdl-radio__button:checked+.mdl-radio__label+.mdl-radio__outer-circle { border: 2px solid #00a4dc } .mdl-radio__button:disabled+.mdl-radio__label+.mdl-radio__outer-circle { border: 2px solid rgba(0, 0, 0, .26); cursor: auto } .mdl-radio__inner-circle { position: absolute; z-index: 1; margin: 0; top: 8px; left: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8px; height: 8px; cursor: pointer; -webkit-transition-duration: .28s; -o-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1); -o-transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-timing-function: cubic-bezier(.4, 0, .2, 1); -o-transition-property: transform; -webkit-transition-property: -webkit-transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); -webkit-border-radius: 50%; border-radius: 50%; background: #00a4dc } .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, .26); cursor: auto } .mdl-radio__button:focus+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .76); box-shadow: 0 0 0 10px rgba(255, 255, 255, .76) } .mdl-radio__button:checked:focus+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle { -webkit-box-shadow: 0 0 0 10px rgba(0,164,220, .26); box-shadow: 0 0 0 10px rgba(0,164,220, .26) } .mdl-radio__label { cursor: pointer } .mdl-radio__button:disabled+.mdl-radio__label { color: rgba(0, 0, 0, .26); cursor: auto }