Powered by

# 목차

  • 1.1. 큰 체크박스,라디오버튼
  • 1.2. 디자인 체크박스
  • 1.3. 토글스위치
  • 1.4. select 디자인 초급
  • 1.5. select 디자인 고급
  • 1.6. 검색창 디자인

# 1. form 요소 디자인

In 

# 1.1. 큰 체크박스,라디오버튼

완성이미지
완성이미지

<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. 디자인 체크박스 

<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. 토글스위치

완성이미지
완성이미지

<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 디자인 초급 

<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 디자인 고급 

<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. 검색창 디자인 

<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;
}
css form

© Copyright 2024. All rights reserved.