2

Hey all, I'm trying to style the standard radio-buttons in accordance with a design provided by the client. See the below example.  Alas, radio-buttons turn out to be taken directly from the bootstrap framework, and have no easily editable classes in the custom SCSS. Using pseudo-classes (see test-code below) I was able to get something working on Chrome. In Firefox the result looked quite poor, and in Edge this code made the radio-buttons disappear altogether.  In short; not quite a working solution.  Does anyone have experience applying custom styling to the radio-buttons, and have some pointers on do's and don'ts?  .custom-radio-inline { input[type="radio"] { position: absolute; height: 0; width: 0; outline: none !important; padding-left: 20px; padding-right: 10px; margin-left: -25px; margin-right: 20px; // opacity: 0; &:before { content: ''; background: #f4f4f4; border-radius: 100%; border: 1px solid darken(#f4f4f4, 25%); display: inline-block; width: 1.4em; height: 1.4em; position: relative; top: -5px; margin-right: 1em; vertical-align: top; cursor: pointer; text-align: center; transition: all 250ms ease; outline: none !important; } &:checked { &:before { background-color: $brand-primary; box-shadow: inset 0 0 0 4px #f4f4f4; } } &:focus, &:active { &:before { outline: none !important; } } &:disabled { &:before { box-shadow: inset 0 0 0 4px #f4f4f4; border-color: darken(#f4f4f4, 25%); background: darken(#f4f4f4, 25%); } } &:empty { &:before { margin-right: 0; } } } } .checkbox-inline, .radio-inline { margin-right: 15px; color: $gray; padding-left: 25px; }   Kind regards, Chris

asked 2017-10-10

1 answers