메뉴 건너뛰기

조회 수 6347 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<style type="text/css">
 .eventWrap div.inNumber{margin-bottom:30px;}
 .eventWrap div.inNumber:after{content:'';display:block;clear:both;}
 .eventWrap div.inNumber input{float:left;width:616px;height:73px;line-height:73px;margin-right:20px;padding:0;border:1px solid #cfcfcf;background:#f2f2f2;text-align:center;color:#444343;font-size:24px;}
 .eventWrap div.inNumber div.selectbox {float:left;position: relative;width: 277px;height:73px;line-height:73px;border: 1px solid #cfcfcf;background:#fbfbfb url('./images/sel_off.gif') no-repeat 219px 50%;;z-index: 1;font-size:24px;}
 .eventWrap div.inNumber div.selectbox label{position: absolute; top: 1px;left: 30px;width:243px;height:73px;line-height:73px; color: #999;z-index: -1;}
 .eventWrap div.inNumber div.selectbox select {width: 100%;height:73px;line-height:73px;font-family: inherit;border: 0;opacity: 0;filter:alpha(opacity=0);-webkit-appearance: none;-moz-appearance: none;appearance: none;}
 .eventWrap .smsPoint{width:912px;padding:105px 0 32px 0;margin-bottom:20px;border:3px solid #f92828;background:url('./images/tit_point_save.gif') no-repeat 0 0;}
 .eventWrap .smsPoint .txtSms{text-align:center;font-size:18px;line-height:26px;margin-bottom:26px;}
 .eventWrap .smsPoint .smsChk{position:relative;text-align:center;}
 .eventWrap .smsPoint .smsChk label{display:inline-block;padding:0 0 0 44px;height:33px;line-height:33px;font-size:25px;color:#000;background:url('./images/bg_checkbox.png') no-repeat 0 0;}
 .eventWrap .smsPoint .smsChk label.on{background-position:0 100%;}
 .eventWrap .smsPoint .smsChk input{position:absolute;top:0px;left:0px;width:315px;height:33px;opacity: 0;filter:alpha(opacity=0);}
 </style>


<div class="inNumber">
   <input type="text" id="inNumber" name="" value="인증번호 8자리 입력(-제외)" />
   <div class="selectbox">
    <label for="labelSel">적립 받을 달 선택</label>
    <select id="labelSel">
     <option>적립 받을 달 선택</option>
     <option>12월</option>
     <option>11월</option>
     <option>10월</option>
     <option>9월</option>
     <option>8월</option>
    </select>
   </div>  
  </div>

  <div class="smsPoint">
   <p class="txtSms">고객님이 잊지 않으시도록 선택하신 달에 고객님께 적립금 지급을 알려드립니다. <br />SMS 수신동의를 해주시기 바랍니다.</p>
   <p class="smsChk">
    <label for="smsAgree">SMS 안내받기 (수신동의)</label>
    <input type="checkbox" id="smsAgree" class="inCheck" />
   </p>
  </div>
  <p class="btnC mb55"><a href="#"><img src="./images/btn_point_save.gif" alt="적립금 받기" /></a></p>
<script type="text/javascript">
 $(document).ready(function() {
  $('#inNumber').on('focus', function(){
   $(this).val('');
  });
  var selectTarget = $('.selectbox select');
  selectTarget.change(function(){
   var select_name = $(this).children('option:selected').text();
   $(this).siblings('label').text(select_name);
  });

  $('.smsChk input').on('click', function(){
   var $this = $(this).parent().find('label');
   if($('#smsAgree').is(':checked')){
    $this.addClass('on');
    //console.log(0);
    //console.log($('#smsAgree').is(':checked'));
   } else {
    $this.removeClass('on');
    //console.log(1);
    //console.log($('#smsAgree').is(':checked'));
   }
  });

 });
 </script>



  1. No Image 22Dec
    by 조쉬
    2016/12/22 Views 6347 

    디자인 셀렉트 박스 & CSS

  2. 드래그 & 드랍 구현 - on()[이벤트리스너]

  3. No Image 21Sep
    by
    2016/09/21 Views 14377 

    동적으로 콤보(select)의 항목(option) 생성하기

  4. No Image 31Mar
    by
    2021/03/31 Views 316 

    다중 select

  5. No Image 21Sep
    by
    2016/09/21 Views 6471 

    다른 프레임에 있는 객채 참조하는 방법

  6. 날짜 검색 범위 정하기 (jquery)

  7. No Image 25Mar
    by
    2021/03/25 Views 284 

    기본 동작 막기

  8. No Image 22Dec
    by
    2016/12/22 Views 6217 

    금액단위 제거 표기

  9. No Image 02Mar
    by
    2017/03/02 Views 7513 

    검토하기: jQuery를 이용하여 form 처리하기

  10. No Image 09Sep
    by
    2016/09/09 Views 7734 

    강제 click 이벤트 발생

  11. No Image 26Mar
    by
    2021/03/26 Views 727 

    간단한 스크롤 따라 움직이는 메뉴 만들기

  12. No Image 21Sep
    by
    2016/09/21 Views 7306 

    간단한 세로 메뉴

  13. No Image 26Mar
    by
    2021/03/26 Views 594 

    간단한 마우스 포인터 따라 다니기

  14. No Image 09Sep
    by
    2016/09/09 Views 9489 

    각종 다이어그램 플러그인 / 차트 / 관계 플러그인

  15. No Image 06Sep
    by
    2018/09/06 Views 2652 

    [jQuery] 확인 창(confirm), 페이지 이동(location.replace)

  16. No Image 11Sep
    by
    2016/09/11 Views 8876 

    [jQuery] 이용 아이디 중복체크 실시간

  17. No Image 27Sep
    by
    2018/09/27 Views 2553 

    [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기

  18. No Image 05Mar
    by
    2019/03/05 Views 1129 

    [jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법

  19. No Image 06Sep
    by
    2018/09/06 Views 2146 

    [jQuery] split, join 으로 공백제거 하기

  20. No Image 06Sep
    by
    2018/09/06 Views 1820 

    [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved