11 폼디자인
1. form 요소 디자인
1.1. 큰 체크박스,라디오버튼
- HTML
- CSS
<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;
}<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">
<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);
}<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">
<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;
}<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>
<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;
}<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">
<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);
});
});<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" />
<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;
}<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;
}