<div class="container-fluid wj-popup">

  <form id="theForm" class="wj-dialog">

    <div class="wj-dialog-header" tabindex="-1">

      레이블링된 입력

    </div>

    <div class="wj-dialog-body">

      <div>

        스타일링된 입력 컨트롤

​

      </div>

​

      <!-- 개인 정보 -->

      <div class="wj-labeled-input">

        <div id="name" autocomplete="name" required></div>

        <label for="name">이름</label>

        <div class="wj-error" tabindex="-1">고객님의 이름을 작성해주시길 바랍니다..</div>

      </div>

      <div class="wj-labeled-input wide">

        <div id="email" autocomplete="email" required pattern="\S+@\S+\.\S+"></div>

        <label for="email">이메일</label>

        <div class="wj-error" tabindex="-1">유효한 이메일을 작성해주시길 바랍니다...</div>

      </div>

      <div class="wj-labeled-input">

        <div id="country" items-source="countries"></div>

        <label for="country">국가</label>

      </div>

      <div class="wj-labeled-input">

        <div id="card" autocomplete="cc-number" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}">

        </div>

        <label for="card">신용카드 #</label>

        <div class="wj-error" tabindex="-1">4자리 숫자로 4개 그룹...</div>

      </div>

​

      <!-- 거래 정보 -->

      <br/>

      <div class="wj-labeled-input">

        <div id="date"></div>

        <label for="date">날짜</label>

      </div>

      <div class="wj-labeled-input">

        <div id="time"></div>

        <label for="time">시간</label>

      </div>

      <div class="wj-labeled-input">

        <div id="qty"></div>

        <label for="quantity">수량</label>

      </div>

      <div class="wj-labeled-input">

        <div id="discount"></div>

        <label for="discount">할인</label>

      </div>

      <div class="wj-labeled-input">

        <div id="colors"></div>

        <label for="colors">좋아하는 색상</label>

      </div>

​

      <div>

        스타일된 체크박스, 라디오 버튼 및 스위치

      </div>

      <div class="wj-labeled-input">

        <input id="theCheckboxForm" type="checkbox" checked />

        <label for="theCheckboxForm">체크박스</label>

      </div>

      <div class="wj-labeled-input switch">

        <input id="theSwitchForm" type="checkbox" />

        <label for="theSwitchForm">스위치</label>

      </div>

      <br/>

      <div class="wj-labeled-input">

        <input id="btnRed" type="radio" name="color" checked />

        <label for="btnRed">레드</label>

      </div>

      <div class="wj-labeled-input">

        <input id="btnGreen" type="radio" name="color" />

        <label for="btnGreen">그린</label>

      </div>

      <div class="wj-labeled-input">

        <input id="btnBlue" type="radio" name="color" />

        <label for="btnBlue">블루</label>

      </div>

    </div>

    <div class="wj-dialog-footer">

      <button class="btn btn-primary" type="submit">확인</button>

      <button class="btn btn-default wj-hide-cancel" type="reset">취소</button>

    </div>

  </form>

</div>

​

@font-face {

  font-family: 'S-CoreDream-3Light';

  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');

  font-weight: normal;

  font-style: normal;

}

​

body {

  margin: 20px;

  font-family: 'S-CoreDream-3Light';

}

​

.container-fluid{

  background-color:#ededed;

  padding:10px;

  border-radius:10px;

}

​