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