제일 만만해보이던 스타일이...

제일 만만해보이던 스타일이...

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

제일 만만해보이던 스타일이...

본문

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>

php
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 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칼라가 바뀔겁니다.

주소복사
채택됨
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 81,270 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 특정 회원 포인트내역 통합(정리)하기

    참여2 회 시작19.12.06 22:31 종료19.12.13 22:31
  2. [잔액관리형] 아웃백디지털상품권 10만원권 3장

    참여78 회 시작19.12.06 00:03 종료19.12.11 00:03

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT