커스텀 체크 버튼 > 웹개발팁


웹개발팁

모아보자 [기타] 커스텀 체크 버튼 웹개발팁

[기타] 커스텀 체크 버튼

본문

 
<style> 
/* The container */ 
.container { 
  display: block; 
  position: relative; 
  padding-left: 35px; 
  margin-bottom: 12px; 
  cursor: pointer; 
  font-size: 22px; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
} 
  
/* Hide the browser's default checkbox */ 
.container input { 
  position: absolute; 
  opacity: 0; 
  cursor: pointer; 
  height: 0; 
  width: 0; 
} 
  
/* Create a custom checkbox */ 
.checkmark { 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 25px; 
  width: 25px; 
  background-color: #eee; 
} 
  
/* On mouse-over, add a grey background color */ 
.container:hover input ~ .checkmark { 
  background-color: #ccc; 
} 
  
/* When the checkbox is checked, add a blue background */ 
.container input:checked ~ .checkmark { 
  background-color: #2196F3; 
} 
  
/* Create the checkmark/indicator (hidden when not checked) */ 
.checkmark:after { 
  content: ""; 
  position: absolute; 
  display: none; 
} 
  
/* Show the checkmark when checked */ 
.container input:checked ~ .checkmark:after { 
  display: block; 
} 
  
/* Style the checkmark/indicator */ 
.container .checkmark:after { 
  left: 9px; 
  top: 5px; 
  width: 5px; 
  height: 10px; 
  border: solid white; 
  border-width: 0 3px 3px 0; 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  transform: rotate(45deg); 
} 
</style> 
 
<label class="container">하나 
  <input type="checkbox" checked="checked"> 
  <span class="checkmark"></span> 
</label> 
<label class="container">둘 
  <input type="checkbox"> 
  <span class="checkmark"></span> 
</label> 
<label class="container">삼 
  <input type="checkbox"> 
  <span class="checkmark"></span> 
</label> 
<label class="container">넷 
  <input type="checkbox"> 
  <span class="checkmark"></span> 
</label> 

첨부파일


모바일버전 RSS SITEMAP