label{ cursor: pointer; margin-right: 13px; font-size: 16px; } input { &[type="text"] { border: 1px solid $gray; box-sizing: border-box; border-radius: 2px; width: 245px; &.large { height: 40px; } &.medium { height: 32px; } &.small { height: 26px; } } // Radio button and checkbox &[type=radio], &[type=checkbox]{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } &[type=radio] + label:before, &[type=checkbox] + label:before { cursor: pointer; font-family: $fontawesome; display: inline-block; color: $dark-gray; letter-spacing: 8px; font-size: 18px; vertical-align: -1px; } &[type=radio]:checked + label:before, &[type=checkbox]:checked + label:before { color: $blue; } &[type=checkbox] + label:before { content: "\f0c8"; } &[type=checkbox]:checked + label:before { content: "\f14a"; font-weight: bold; } &[type=radio] + label:before { content: "\f111"; } &[type=radio]:checked + label:before { content: "\f192"; } }