form { &#smileys { //input[type="radio"] { .radio_smile{ width: 90px; height: 90px; border: none; cursor: pointer; transition: border .2s ease; filter: grayscale(100%); margin: 0 5px; transition: all .2s ease; &:focus { outline: 0; } &:hover, &:checked { filter: grayscale(0); } &.very-sad { background: url('/sh_all_in_one_helpdesk/static/src/img/emg1.svg') center; background-size: cover; } &.sad { background: url('/sh_all_in_one_helpdesk/static/src/img/emg4.svg') center; background-size: cover; } &.neutral { background: url('/sh_all_in_one_helpdesk/static/src/img/emg5.svg') center; background-size: cover; } &.happy { background: url('/sh_all_in_one_helpdesk/static/src/img/emg3.svg') center; background-size: cover; } &.very-happy { background: url('/sh_all_in_one_helpdesk/static/src/img/emg2.svg') center; background-size: cover; } } } } .mtt { position: fixed; bottom: 10px; right: 20px; color: #999; text-decoration: none; span { color: #e74c3c; } &:hover { color: #666; span { color: #c0392b; } } } #smileys .radio_smile { //input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }