HTML checkbox 색상 변경 - HTML checkbox saegsang byeongyeong

Question

input type:checkbox 체크박스 커스텀 css디자인 변경하기 본문

input태그 커스텀은 label으로!

html태그 는 기본적으로 아주 심플한 디자인으로 보여지는데 프로젝트를 진행해보면 사이트의 분위기라던거 컨셉에따라 다른 디자인으로 변경해야하는 경우가 있다.

근데 단순하게 style로 바로 input태그를 커스텀할수가 없다.

이때 사용하는 방법이 바로 lable이다. checkbox뿐만아니라 같은 방법으로 파일 열기인 도 역시 label으로 커스텀할 수 있다.

일단 기본 체크박스의 경우 아래와 같다.

이걸 조금 더 사이즈가 큰 체크박스로 바꿔보려고 한다

checkbox옆에 label태그를 생성해 checkbox의 id 속성을 label태그의 for속성으로 연결해준다

· html

그리고 이 라벨을 원하는 디자인으로 css 스타일을 꾸며준다.

체크시 디자인은 그냥 박스가 채워지는 디자인으로 하고싶다면 background만 변경해주면 되고 나처럼 다른모양을 넣고싶다면 ::after선택자를 이용해 넣어주면 된다

기존의 input태그는 display:none으로 가려주면 끝-!

· css

input[type="checkbox"]{
        display: none;
      }
input[type="checkbox"] + label{
        display: inline-block;
        width: 30px;
        height: 30px;
        border:3px solid #707070;
        position: relative;
      }
input[id="check1"]:checked + label::after{
        content:'✔';
        font-size: 25px;
        width: 30px;
        height: 30px;
        text-align: center;
        position: absolute;
        left: 0;
        top:0;
      }

<%@ page contentType="text/html; charset=euc-kr" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>

<script language="javascript">
// 체크하는 함수
function f_chk(aro_name)
{
var ls_chk_tr_color1 = "red"; // 체크되면 변경될 tr의 색상
var ls_chk_tr_color2 = "#ffffff"; // 체크가 해제되면 변경될 tr의 색상

var ls_chk_font_color1 = "#ffffff"; // 체크되면 변경될 font의 색상
var ls_chk_font_color2 = "black"; // 체크가 해제되면 변경될 font의 색상

   // 이벤트가 발생한 Object
   var lo_this    = aro_name;
   var li_cells = 0; // 해당 rows의 cells 개수
   var ls_checked = "";    // 체크유무

li_cells = lo_this.cells.length; // 이벤트가 일어난 tr의 cells개수를 구한다.

   if(lo_this.bgColor == ls_chk_tr_color2)
   {
lo_this.bgColor = ls_chk_tr_color1;    // 백그라운드 색상을 변경해준다.
lo_this.style.color = ls_chk_font_color1; // 폰트 색상을 변경해준다.
ls_checked = true; // 체크박스를 체크한다.
   }
   else
   {
lo_this.bgColor = ls_chk_tr_color2;
lo_this.style.color = ls_chk_font_color2; // 폰트 색상을 변경해준다.
ls_checked = false;    // 체크박스를 체크하지 않는다.
   }

   // td를 순차적으로 돌면서 그 첫번째 요소가 체크박스인지 확인한다.
   for(var i=0; i<li_cells; i++)
   {
// 체크박스일경우에는 색상에 따라서 체크박스를 변경해준다.
if(lo_this.cells[i].childNodes(0).type == "checkbox")
{
   lo_this.cells[i].childNodes(0).checked = ls_checked;
}
   }

}
</script>

</head>

<body>