11.폼디자인
1. form 요소 디자인
1.1. 큰 체크박스,라디오버튼
- HTML
- CSS
<form action="#" method="get">.checkbox {
<form action="#" method="get"> <div class="checkbox"> <input type="checkbox" name="check1" id="check1" value="1" class="checkbox1" /> <label for="check1">큰체크박스</label> <input type="radio" name="radio1" id="radio1" value="1" class="checkbox1" /> <label for="radio1">큰라디오버튼</label> </div></form>
.checkbox { margin: 2em 0;}
/*big checkbox*/.checkbox input.checkbox1 { font-size: 1em; width: 1.25em; /* 너비 설정 */ height: 1.25em; /* 높이 설정 */ vertical-align: middle;}
.checkbox input.checkbox1 + label { /* 라벨 텍스트 크기와 수직 정렬 맞춤 */ font-size: 1.125em; vertical-align: middle;}
1.2. 디자인 체크박스
- HTML
- CSS
<form action="#" method="get">.checkbox {
<form action="#" method="get"> <div class="checkbox"> <input type="checkbox" name="check2" id="check2" value="2" class="checkbox2" /> <label for="check2">디자인체크박스</label> </div></form>
.checkbox { margin: 2em 0;}.checkbox2 + label { position: relative;}
.checkbox input.checkbox2 { display: none;}
.checkbox input.checkbox2 + label:before { /* 체크박스 배경 */ display: inline-block; content: ''; width: 1.25em; height: 1.25em; border: 2px solid #a66; background-color: #a00; border-radius: 50%; margin: 0 5px -6px 0;}
.checkbox input.checkbox2 + label:after { /* 체크 마크 */ position: absolute; left: 4px; content: '✔'; /* 체크 마크 ASCii 문자 */ font-size: 1.5em; line-height: 0.8; color: #a88; transition: all 0.3s;}
input.checkbox2 + label:after { /* 기본 상태 - 투명에 크기 0 */ opacity: 0; transform: scale(0);}
input:checked.checkbox2 + label:after { /* 체크 상태 - 불투명에 크기 1 */ opacity: 1; transform: scale(1);}
1.3. 토글스위치
- HTML
- CSS
<form action="#" method="get">/* switch toggle */
<form action="#" method="get"> <div class="toggle"> <input type="checkbox" name="toggle1" id="toggle1" value="1" /> <label for="toggle1">스위치</label> </div></form>
/* switch toggle */.toggle { position: relative; display: inline-block;}
.toggle input { display: none;}
.toggle label { display: block; width: 48px; height: 24px; text-indent: -250%; /* 라벨 텍스트 왼쪽으로 이동*/ user-select: none; /* 라벨 텍스트 선택 차단 */}
.toggle label::before,.toggle label::after { content: ''; display: block; position: absolute; cursor: pointer;}
.toggle label::before { /* 배경 */ width: 100%; height: 100%; background-color: #dedede; border-radius: 1em; -webkit-transition: background-color 0.25s ease; transition: background-color 0.25s ease; /* 배경색 애니메이션*/}
.toggle label::after { /* 스위치 */ top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.45); -webkit-transition: left 0.25s ease; transition: left 0.25s ease; /* 스위치 이동 애니메이션 */}
.toggle input:checked + label::before { background-color: skyblue; /* 켠 상태 배경색 */}
.toggle input:checked + label::after { /* 켠 상태 스위치 위치 */ left: 24px;}
1.4. select 디자인 초급
- HTML
- CSS
<form action="#" method="get">select {
<form action="#" method="get"> <select> <option selected>사이즈</option> <option>S</option> <option>M</option> <option>L</option> </select></form>
select { -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; background: url(arrow.svg) no-repeat 95% 50%; background-size: 15px; width: 200px; padding: 0.8em 0.5em; border: 1px solid #999; border-radius: 10px;}
/* IE 10, 11의 네이티브 화살표 숨기기 */select::-ms-expand { display: none;}
1.5. select 디자인 고급
- HTML
- CSS
- JS
<form action="#" method="get">.blind {$(function () {
<form action="#" method="get"> <fieldset class="selectbox"> <legend class="blind">색상을 선택하세요</legend> <label for="select">옵션</label> <select id="select"> <option selected>색상</option> <option>Red</option> <option>Black</option> <option>Green</option> </select> </fieldset></form><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.selectbox { position: relative; width: 200px; border: 1px solid #999; z-index: 1;}
/* 가상 선택자를 활용 화살표 대체 */.selectbox:before { content: ''; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-top: 5px solid #333;}
.selectbox label { position: absolute; /* 위치정렬 */ top: 1px; left: 5px; /* 위치정렬 */ /* select의 여백 크기 만큼 */ padding: 0.8em 0.5em; color: rgb(246, 16, 16); /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ z-index: -1;}
.selectbox select { width: 100%; height: auto; /* 높이 초기화 */ line-height: normal; /* line-height 초기화 */ font-family: inherit; /* 폰트 상속 */ padding: 0.8em 0.5em; /* 여백과 높이 결정 */ border: 0; opacity: 0; /* 숨기기 */ filter: opacity(0); /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none;}
$(function () { var selectTarget = $('.selectbox select'); selectTarget.change(function () { var select_name = $(this).children('option:selected').text(); $(this).siblings('label').text(select_name); });});
1.6. 검색창 디자인
- HTML
- CSS
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />.search_wrap {
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<form action="#" method="get"> <div class="search_wrap"> <span class="icon"><i class="fa fa-search"></i></span> <input type="search" id="search" placeholder="Search..." /> </div></form>
.search_wrap { width: 300px; vertical-align: middle; white-space: nowrap; position: relative; line-height: 50px; height: 50px;}
.search_wrap input#search { width: 300px; height: 50px; background: #2b303b; border: none; font-size: 10pt; color: #63717f; padding-left: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; transition: background 0.2s;}
.search_wrap input#search::-webkit-input-placeholder { color: #65737e;}
.search_wrap input#search:-moz-placeholder { /* Firefox 18- */ color: #65737e;}
.search_wrap input#search::-moz-placeholder { /* Firefox 19+ */ color: #65737e;}
.search_wrap input#search:-ms-input-placeholder { color: #65737e;}
.search_wrap .icon { position: absolute; top: 0%; left: 0; margin-left: 17px; margin-top: -3px; z-index: 1; color: #4f5b66;}
.search_wrap input#search:hover,.search_wrap input#search:focus,.search_wrap input#search:active { outline: none; background: #ffffff;}