제일 만만해보이던 스타일이...
본문
option-input 스타일이 아래와 같습니다.
그런데 option-input-blue를 추가하려는데 다른부분은 다 같구요
.option-input:checked {
background: #fe4409;
}
이렇고
.option-input-blue:checked {
background: #0af;
}
이런데요 아래 스타일에서
중복되지 않는 부분만 추가적용하는 방법이 있나요
클래스명이 다르게 이걸 두번 써줘야 하는지요,,,
<style>
.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%;
}
</style>
답변 1
.option-blue만 추가해보세요.
.option-input.option-blue:checked {
background: #0af;
}
<input class="option-input">
<input class="option-input option-blue">
두번째 inputdms option-input 모든 스타일이 적용되면서 checked상태일때만 background칼라가 바뀔겁니다.