• HTML
  • CSS

체크박스 & 라디오 버튼 꾸미기

2018-11-08 370

설명

  • 카카오톡 링크

체크박스와 라디오 버튼을 꾸미는 소스입니다

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	li {display:inline-block;}
	li input[type=checkbox] {display: none;}
	li input[type=checkbox] + label{word-wrap:break-word; word-break:keep-all; display: inline-block; cursor: pointer; position: relative; padding-left: 20px; font-size:14px; color:#404040; line-height:21px;letter-spacing:-0.5px}
	li input[type=checkbox]+ label:before {  content: ""; display: inline-block; width:14px; height:14px; margin-right:10px;position: absolute;  left: 0;top:3px; background-color: #fff; border-radius: 4px; border:1px solid #ccc}
	li input[type=checkbox]:checked + label:before { content: "\2713";text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 11px; font-weight: 800; color: #000; background: #fff; text-align: center; line-height: 13px;} 

	li input[type=radio] {display: none;}
	li input[type=radio] + label{word-wrap:break-word; word-break:keep-all; display: inline-block; cursor: pointer; position: relative; padding-left: 20px; font-size:14px; color:#404040; line-height:21px;letter-spacing:-0.5px}
	li input[type=radio]+ label:before {  content: ""; display: inline-block; width:14px; height:14px; margin-right:10px;position: absolute;  left: 0;top:3px; background-color: #fff; border-radius: 4px; border:1px solid #ccc}
	li input[type=radio]:checked + label:before { content: "\2713";text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 11px; font-weight: 800; color: #000; background: #fff; text-align: center; line-height: 13px;} 
</style>
체크박스
<ul>
	<li>
		<input type="checkbox" class="" id="one" value="" checked="">
		<label for="one">첫번째</label>
	</li>
	<li>
		<input type="checkbox" class="" id="two" value="" checked="">
		<label for="two">두번째</label>
	</li>
</ul>

라디오 버튼
<ul>
	<li>
		<input type="radio" class="" name="radio" id="ra_one" value="" checked="">
		<label for="ra_one">첫번째</label>
	</li>
	<li>
		<input type="radio" class="" name="radio" id="ra_two" value="" checked="">
		<label for="ra_two">두번째</label>
	</li>
</ul>