11.폼디자인

1. form 요소 디자인

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

HTML

<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>

CSS

.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

<form action="#" method="get">
    <div class="checkbox">
        <input type="checkbox" name="check2" id="check2" value="2" class="checkbox2" />
        <label for="check2">디자인체크박스</label>
    </div>
</form>

CSS

.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

<form action="#" method="get">
    <div class="toggle">
        <input type="checkbox" name="toggle1" id="toggle1" value="1" />
        <label for="toggle1">스위치</label>
    </div>
</form>

CSS

/* 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

<form action="#" method="get">
    <select>
        <option selected>사이즈</option>
        <option>S</option>
        <option>M</option>
        <option>L</option>
    </select>
</form>

CSS

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

<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>

CSS

.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;
}

JS

$(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

<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>

CSS

.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;
}