[CSS] checkbox

<!-- txt-hide 클래스로 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>

 

input을 아예 다른 태그들로 만들 때 input이 아닌 태그들로 만들게 되면 웹접근성이나 SEO에 영향이 없나?

- checkbox는 선택이라는 용도로  input type="checkbox"하는 이유는 체크박스를 구현하는 것이니 그에 맞게 html 코드를 추가해 주는 것이다. 

 

참고) input과 label의 순서는 바뀌어도 상관없고 for이랑 id 연결만 신경쓰면 된다.

 

.form-login .labl-hold{
    display: block;
    height:22px;
    margin:17px 0 21px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color:#767676;
    cursor: pointer;
}
.form-login .labl-hold::before{
    display: inline-block;
    content:"";
    width:22px;
    height:22px;
    margin-right:8px;
    vertical-align: -5px;
    background-image:url("images_login/icon_check_empty.png") ;
}

.form-login .inp-hold:focus+.labl-hold::before{
    outline:1px solid #000;
    border-radius: 50%;
    /*outline-offset: 5px;*/ 
}

.form-login .inp-hold:checked+.labl-hold::before{
    background-image:url("images_login/icon_check.png") ;
}

체크박스에 outline을 준 이유는 웹표준성으로 고려하여 tab해서 선택되었을 때를 고려한것이다. outline이 들어간 요소에 border-radius 하면 outline에 적용된다.

 

만약! outline이 디자인에 영향을 주어 바꾸어야한다면 box-shadow쓰는것도 좋다.