제가 지금 체크박스를 꾸미고 싶은데요... <div><br></div> <div><div>.checks input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */</div> <div> position: absolute;</div> <div> width: 1px;</div> <div> height: 1px;</div> <div> padding: 0;</div> <div> margin: -1px;</div> <div> overflow: hidden;</div> <div> clip:rect(0,0,0,0);</div> <div> border: 0</div> <div>}</div> <div>.checks input[type="checkbox"] + label {</div> <div> display: inline-block;</div> <div> position: relative;</div> <div> cursor: pointer;</div> <div> -webkit-user-select: none;</div> <div> -moz-user-select: none;</div> <div> -ms-user-select: none;</div> <div>}</div> <div>.checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */</div> <div> content: ' ';</div> <div> display: inline-block;</div> <div> width: 21px; /* 체크박스의 너비를 지정 */</div> <div> height: 21px; /* 체크박스의 높이를 지정 */</div> <div> line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */</div> <div> margin: -2px 8px 0 0;</div> <div> text-align: center; </div> <div> vertical-align: middle;</div> <div> background: red;</div> <div> border-radius : 3px;</div> <div> box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);</div> <div>}</div> <div><br></div> <div>.checks input[type="checkbox"] + label:active:before,</div> <div>.checks input[type="checkbox"]:checked + label:active:before {</div> <div> box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);</div> <div>}</div> <div><br></div> <div>.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ </div> <div> content: '\2714'; /* 체크표시 유니코드 사용 */</div> <div> color: black;</div> <div> text-shadow: 1px 1px #fff;</div> <div> background: red;</div> <div> border-color: black;</div> <div> box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);</div> <div>}</div></div> <div><br></div> <div>이런식으로 css가 되어있고</div> <div><br></div> <div><div><input type="checkbox" id="ex_chk" name="objChkBox" onClick="chkBoxCheck(0)"> </div> <div><label for="ex_chk" >1</label></div> <div><br></div> <div><input type="checkbox" id="ex_chk2" name="objChkBox" onClick="chkBoxCheck(1)"></div> <div><label for="ex_chk2">2</label></div></div> <div><br></div> <div>이런식으로 input 태그가 되어있는데</div> <div>저css에 background 를 바꾸면 둘다 바뀌는데 하나하나 따로바꾸고 싶을땐 어떻게 해야할까요??</div>
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.