UI Laboratory

UI 개발을 위한 레퍼런스

Custom
Form

설명
Custom Form은 브라우저에서 제공하는 Form 스타일이 아닌 css와 이미지, 스크립트를 이용하여 사용자가 정의한 스타일링을 제공한다. 이는 브라우저에 상관없이 동일한 Look을 보장하는 이점이 있다.

라디오 버튼

사용하는 스마트폰은?

사용하는 스마트폰은?

만족도

체크박스

동의

HTML

					
사용하는 스마트폰은?

사용하는 스마트폰은?

<input type="radio" name="radio_period" id="radio_month1" checked /> <input type="radio" name="radio_period" id="radio_month3" /> <input type="radio" name="radio_period" id="radio_month6" /> <input type="radio" name="radio_period" id="radio_month12" /> <input type="radio" name="radio_period" id="radio_month36" />

만족도

<input type="radio" name="radio_cert" id="radio_mobile" checked> <input type="radio" name="radio_cert" id="radio_ipin"> <input type="radio" name="radio_cert" id="radio_center">
동의
<input type="checkbox" name="fruit" id="apple"> <input type="checkbox" name="fruit" id="strawberry"> <input type="checkbox" name="fruit" id="mango"> <input type="checkbox" name="fruit" id="graph">

CSS

					<style type="text/css">
						input[type="checkbox"], label {vertical-align:middle;line-height:1em;}
						input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0;}

						/* radio button */
						.form {padding:0 !important;}
						.form .form-field {width:640px; margin:20px auto;}
						.form .form-field .input-radio.inline {width:16%;}
						.form .form-field .input-chk.inline {width:16%;}
						.form .items {margin-top:10px;}

						.input-radio {display:block;height:20px;position:relative}
						.input-radio.inline {display:inline-block;}
						.input-radio input {position:absolute;top:50%;left:2px;z-index:9;width:14px;height:14px;margin-top:-8px;}
						.input-radio label {display:inline-block;position:absolute;top:-1px;left:0;z-index:10;height:14px;padding:3px 0 0 23px;background:url(images/icon_radiobutton.png) 0 0 no-repeat;color:#555;cursor:pointer}
						.input-radio input + label.on {background-position:0 -17px;font-weight:normal;}

						/* checkbox */
						.input-chk{display:block;height:20px;position:relative}
						.input-chk.inline {display:inline-block;}
						.input-chk input{position:absolute;top:50%;left:2px;z-index:9;width:15px;height:15px;margin-top:-7px;}
						.input-chk label{display:inline-block;position:absolute;top:0;left:0;z-index:10;width:100%;height:15px;padding:4px 0 0 26px;background:url(images/icon_checkbox.png) 0 0 no-repeat;color:#555;cursor:pointer}
						.input-chk input + label.on {background-position:0 -20px;}
					</style>
				

Javascript

					<script type="text/javascript">

						(function ($) {
							$.Form= function () {

								function init(){

									bindEvents();

								}

								function bindEvents(){

									/* checkbox toggle */
									$(':checkbox').click(function(){
										var $label = $(this).next('label');
										$(this).is(':checked') ? $label.addClass('on') : $label.removeClass('on');
										$(this).is(':checked') ? $(this).prop('checked', true) : $(this).prop('checked', false);
									});

									/* radio button toggle */
									$(':radio').click(function(){
										//console.log($(this));
										var $label = $(this).next('label');
										var val = $(this).attr('name');
										var $labelGroup = $('input[name='+val+']').next();
										$labelGroup.removeClass('on');
										if($(this).is(':checked')){
											$('input[name='+val+']').prop('checked',false);
											$(this).prop('checked',true);
											$label.addClass('on');
										}
									});

								}

								init();

							};

						}(jQuery));

						$(function () {
							new $.Form();
						});

					</script>
				

입력박스

입력박스

HTML

					
입력박스

CSS

					<style type="text/css">
						.inline {display:inline-block !important;}

						input.form-control {display: block; font-size: 12px; height: 30px; line-height:30px; padding:0 12px; color:#333333; border:1px solid #d9dbe3; border-radius:4px;}
						input.form-control.size-md{padding:0 18px; height:38px; font-size:12zpx; line-height:38px;}
						input.form-control.size-lg{padding:0 18px; height:48px; font-size:14px; line-height:48px;}
						input[readonly="readonly"]{background-color:#fbfbfb;}
						input.form-control:hover{border:1px solid #bbbbbb;}
					</style>
				

Javascript

					<script type="text/javascript">

						$(function() {
							$('input, textarea').placeholder();
						});

					</script>