제일 만만해보이던 스타일이... 채택완료
option-input 스타일이 아래와 같습니다.
그런데 option-input-blue를 추가하려는데 다른부분은 다 같구요
.option-input:checked { background: #fe4409; }
이렇고
.option-input-blue:checked { background: #0af; }
이런데요 아래 스타일에서
중복되지 않는 부분만 추가적용하는 방법이 있나요
클래스명이 다르게 이걸 두번 써줘야 하는지요,,,
.option-input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; position: relative;
left: 0; height: 30px; width: 30px; transition: all 0.15s ease-out 0s; background: #cbd1d8; border: none; color: #fff; cursor: pointer; display: inline-block; margin-right: 0.3rem; outline: none; position: relative; z-index: 100; } .option-input:hover { background: #9faab7; } .option-input:checked { background: #fe4409; } .option-input:checked::before { height: 30px; width: 30px; position: absolute; content: '✔'; display: inline-block; font-size: 26.66667px; text-align: center; line-height: 30px; } .option-input:checked::after { -webkit-animation: click-wave 0.65s; -moz-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #40e0d0; content: ''; display: block; position: relative; z-index: 100; } .option-input.radio { border-radius: 50%; } .option-input.radio::after { border-radius: 50%; }
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
덕분에 코드 많이 줄였씁니다.