javascript 없이 input radio 별점주기

의미론적으로 input radio로 별점 5개중 1개를 선택하는 마크업으로 구현

 

<div class="startRadio">
	<label class="startRadio__box">
		<input type="radio" name="star" id="">
		<span class="startRadio__img"><span class="blind">별 1개</span></span>
	</label>
	<label class="startRadio__box"> .. 반복 ~~ 별5개</label>
</div>

위 마크업을 기본으로

jquery 없이 css로만 구현

 

startRadio 의 after 가상태그에 기본 별의 테두리만 색이 채워지고 안쪽은 투명한 이미지 준비한다

이미지는 이것 하나만 사용된다

startRadio 는 안쪽 컨텐츠 개수만큼 커질수 있게 display:inline-block으로 설정

after에 별 높이값만큼 높이 설정후 width값은 지정해 주지 않는다

 

이렇게 별의 배경 세팅이 되었다.

 

label에 별 width, height 값을 세팅

float:left로 일렬 나열,

position:relative : 선택된 별 보다 낮은 개수는 채워질수 있는 기준점 설정

 

*핵심*

startRadio__img : 넓이값은 넉넉하게 설정해주는데 보통 총 input의 개수*width 만큼 주면 된다

label의 relative 기준 right : 0 으로 선택된 별 앞쪽은 색깔로 채워진다

 

'별 2개' radio가 선택된 경우 

checkbox 된 input 다음에 있는 .starRadio__img의 background-color 의 색이 채워지고

position 으로 radio의 부모 label의 왼쪽기준 가로사이즈 500px이였던 배경이 투명한 별들 아래로 깔리면서

선택된 별 이전 요소들에 체크가 된 것처럼 보여진다

별 2개 선택시 starRadio__img background

별 4개 선택시 starRadio__img background

 

여기서 position으로 띄워진 요소가 클릭을 방해하기 때문에

배경이 되는 .startRadio:after , .startRadio__img 에 pointer-event:none 처리

 

 

 

 

 

완성된 코드

 

See the Pen xxGMoRN by soohyeon (@sooh) on CodePen.

 

 

 

 

반쪽짜리 별일경우

.startRadio__box 의 width값을 한개기준/2 로 설정하면 별 반쪽만 선택이 된다

 

별 반쪽짜리 완성코드

  See the Pen https://codepen.io/sooh/pen/JjdxQed">
  JjdxQed by soohyeon (https://codepen.io/sooh">@sooh)
  on https://codepen.io">CodePen.