checkbox / radio CSS style
input[type=checkbox]와 input[type=radio]는 안보이게 하고, label을 이용한 적용 예시 입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<div class="chk_div">
<h2>체크박스</h2>
<div class="item_cont">
<div class="wrap_chk">
<input id="inp_chk_kor1" class="inp_chk" name="inp_chk_kor" type="checkbox" value="Y">
<label for="inp_chk_kor1" class="inp_chk_lab"></label>
</div>
<span class="inp_lang">Event</span>
</div>
<div class="item_cont">
<div class="wrap_chk">
<input id="inp_chk_kor2" class="inp_chk" name="inp_chk_kor" type="checkbox" value="Y">
<label for="inp_chk_kor2" class="inp_chk_lab"></label>
</div>
<span class="inp_lang">Event1</span>
</div>
<div class="blank"></div>
<h2>라디오박스</h2>
<div class="item_cont list_sort">
<div class="wrap_chk">
<input id="inpLevel1" class="inp_chk" name="inp_radio" type="radio" value="Y" />
<label for="inpLevel1" class="inp_chk_lab"></label>
</div>
<span class="inp_lang">1</span>
</div>
<div class="item_cont list_sort">
<div class="wrap_chk">
<input id="inpLevel1" class="inp_chk" name="inp_radio" type="radio" value="Y" />
<label for="inpLevel1" class="inp_chk_lab"></label>
</div>
<span class="inp_lang">2</span>
</div>
</div>
<div class="file_div">
<h2>파일첨부</h2>
<div class="file_box">
<input type="text" class="txt_file">
<div class="btn_box">
<label class="btn_txt">첨부</label>
<input type="file" class="btn_file">
</div>
</div>
</div>
</body>
</html>
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
h2 {font-size: 18px;line-height:20px;font-weight:bold;margin-bottom:10px}
body {background-color:#f1f1f1;}
input {margin:0;padding:0;}
label {margin:0;padding:0;}
.blank {height:80px;}
.chk_div {height:200px}
.item_cont {float:left; padding: 10px 0; width:150px}
.wrap_chk {position: relative; width:20px; height:20px; margin-right:10px}
.wrap_chk .inp_chk {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;margin:0;opacity: 0.01;cursor:pointer}
.wrap_chk .inp_chk_lab {display:block;overflow:hidden;width:20px;height:20px;border:1px solid #efe6d7;border-radius:2px;background-color:#fff;}
.wrap_chk .inp_chk_lab {font-weight:normal;font-size:16px;color:#333}
.wrap_chk .inp_chk_lab::after {display:none;width:7px;height:3px;margin:6px auto 0;border:3px solid #f88379;border-top:none;border-right:none;
-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);content:""}
.wrap_chk .inp_chk:hover + label::after {display:block;opacity:0.3}
.wrap_chk .inp_chk:checked + label::after {display:block}
.inp_lang {height:20px;font-size:1em;line-height:1.2;float:left;margin-top:-20px;margin-left:30px}
/*라디오*/
.item_cont.list_sort .wrap_chk label.inp_chk_lab {border-radius:20px}
.item_cont.list_sort .wrap_chk label.inp_chk_lab::after {width:10px;height:10px;margin:4px auto 0;border:0 none;border-radius:10px;background-color:#f88379}
/* 파일첨부 */
.file_div {display:block;margin-top:20px;}
.file_box {position:relative;width:100%;height:50px}
.txt_file {overflow:hidden;float:left;width:70%;height:50px;padding:0 10px;box-sizing:border-box;}
.btn_box {position:relative;float:left;width:30%;height:50px;line-height:50px;text-align:center;background-color:#333;}
.btn_box .btn_txt {text-align:center;color:#fff;width:100%;height:100%;}
.btn_box .btn_file {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#eee;opacity:0;cursor:pointer}
코드확인
'작업 일지 > HTML CSS' 카테고리의 다른 글
| position: sticky > 요소 고정 사용 (0) | 2024.03.08 |
|---|---|
| input style / input[type=checkbox/radio] 디자인 적용 (0) | 2024.03.07 |
| IE 조건문 CSS (특정버전 이하의 브라우저일경우 적용) (0) | 2023.07.05 |
| [CSS]반응형 웹 이디어쿼리 mediaquery (0) | 2023.07.05 |
| [CSS] Reset 리셋 (0) | 2023.07.05 |