전화번호 입력폼 나누기

전화번호 입력폼 나누기

QA

전화번호 입력폼 나누기

본문

 

e3ae03a28c78eef91c1a3656f38376bc_1437635435_0445.jpg 

 

첨부 이미지처럼 게시판 글쓰기에서 전화번호를 셀렉트와 두개의 폼으로 나타내려고 합니다.

아래와 같은 스타일시트에서는 어떻게 추가로 소스를 넣으면 가능할까요?

여러가지 방법으로 해보다 안되어서 질문 올립니다.

감사합니다.

 

/* destroy gnuboard basic css */
.writebox.havebtn {padding-bottom:45px;}
input[type=password],
input[type=email],
input[type=url],
input[type=file],
input[type=number],
select, label, button, img, .frm_input {vertical-align:top}


/* 작성폼
.commentbox,
.writebox {overflow: hidden;position: relative;margin: 0;border-top: 1px solid #bfc2c4;border-left: 1px solid #bfc2c4;border-right: 1px solid #a8aaab;border-bottom: 1px solid #a8aaab;box-shadow: 0 1px 0 rgba(164,168,171,0.2);-webkit-box-shadow: 0 1px 0 rgba(164,168,171,0.2);background-color: #f4f4f4;clear: both;}
.writebox .tips {padding: 10px 15px 10px 15px;}
.writebox .tips p em {color: #5a8daf;}
.writebox .inputbox {padding:0;}
.writebox .inputbox .inputnt {position: relative;height: 30px;margin-top:0;margin-bottom: 5px;padding:0 0 0 5px;border: 1px solid #bcbcbc;background-color: #fff;line-height: 28px;}
.writebox .inputbox .inputnt input[type=text],
.writebox .inputbox .inputnt input[type=password],
.writebox .inputbox .inputnt input[type=email],
.writebox .inputbox .inputnt input[type=url],
.writebox .inputbox .inputnt input[type=file],
.writebox .inputbox .inputnt input[type=email],
.writebox .inputbox .inputnt input[type=number],
.writebox .inputbox .inputnt input[type=tel],
.writebox .inputbox .inputnt input[type=date],
.writebox .inputbox .inputnt input[type=range],
.writebox .inputbox .inputnt input[type=url],
.writebox .inputbox .inputnt input[type=search],
.writebox .inputbox .inputnt select,
.writebox .inputbox .inputnt textarea {width: 100%;height: 30px;border: 0;-webkit-appearance: none;-webkit-border-radius: 0;background-color:#fff !important;}
.writebox .inputbox .inputnt select {background: url(../wz.img/ico_select_arrow.png) no-repeat right 50% !important;background-size: 15px 5px !important;padding-right:10px;}
.writebox .inputbox .inputarea {margin-bottom: 5px;padding: 0 5px;border: 1px solid #bcbcbc;background-color: #fff;}
.writebox .inputbox .inputarea textarea {width: 100%;height:150px;border: 0;-webkit-appearance: none;-webkit-border-radius: 0;}
.writebox .inputbox .submitcols {position: relative;padding-right: 100px;}
.writebox .inputbox .submitcols .common_btn {position: absolute;right: 0;top: 0;width: 113px;border: 1px solid #aaa;box-shadow: 1px 1px 0 #d3d3d3;height: 32px;letter-spacing: -1px;padding: 2px 8px 0;text-align: center;background-color: #f6f6f6;background-repeat: repeat-x;background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#eee));background: -moz-linear-gradient(top, #fefefe, #eee);background: -ms-linear-gradient(top, #fefefe, #eee);background: -o-linear-gradient(top, #fefefe, #eee);}
.writebox .inputbox .checkBox label {margin-right: 10px;padding-left: 5px;font-size: 14px;color: #767676;vertical-align: middle;}
.writebox .btm-btns {position: absolute;bottom: 0;left: 0;width: 100%;border-top: 1px solid #bcbcbc;}
.writebox .btm-btns a {float: left;width: 33%;height: 30px;font-size: 13px;height:30px;line-height: 30px;color: #737373;text-align: center;background-color: #f6f6f6;background-repeat: repeat-x;background: -webkit-linear-gradient(top, #fefefe, #eee);background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#eee));background: -moz-linear-gradient(top, #fefefe, #eee);background: -ms-linear-gradient(top, #fefefe, #eee);background: -o-linear-gradient(top, #fefefe, #eee);}
.writebox .btm-btns a span {display: block;border-left: 1px solid #fff;border-right: 1px solid #bcbcbc;}
.writebox .btm-btns a:last-child {width: 34%;}
.writebox .btm-btns a:last-child span {border-right:none;}
.writebox .btm-btns .lbtns {float: left;text-align: center;}
.writebox .btm-btns button {width: 98%;font-size: 13px;margin:6px 0;padding:8px;color: #737373;text-align: center;background-color: #f6f6f6;background-repeat: repeat-x;border-radius: 3px;background: -webkit-linear-gradient(top, #fefefe, #eee);background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#eee));background: -moz-linear-gradient(top, #fefefe, #eee);background: -ms-linear-gradient(top, #fefefe, #eee);background: -o-linear-gradient(top, #fefefe, #eee);border: 1px solid #aaa;box-shadow: 1px 1px 0 #d3d3d3;}
.writebox .btm-btns .sbmt {font-weight:bold;}
.writebox .inputbox .searchcols {position: relative;padding-left:80px;padding-right: 75px;}
.writebox .inputbox .searchcols .common_sfl {position: absolute;left: 0;top: 0;width: 74px;height:30px;padding:0;border:1px solid #bcbcbc;background-color: #fff;line-height:28px;}
.writebox .inputbox .searchcols .common_sfl select {padding-left:3px;background: url(../wz.img/ico_select_arrow.png) no-repeat right 50%;;background-size: 15px 5px;padding-right: 10px;width:100%;height:30px;border:0;-webkit-appearance: none;-webkit-border-radius: 0px;
border-radius: 0px;background-color:#fff;}
.writebox .inputbox .searchcols .common_btn {position: absolute;right: 0;top: 0;width: 70px;border: 1px solid #aaa;box-shadow: 1px 1px 0 #d3d3d3;height: 32px;letter-spacing: -1px;padding: 2px 8px 0;text-align: center;background-color: #f6f6f6;background-repeat: repeat-x;background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#eee));background: -moz-linear-gradient(top, #fefefe, #eee);background: -ms-linear-gradient(top, #fefefe, #eee);background: -o-linear-gradient(top, #fefefe, #eee);}
.writebox .inputbox .searchcols .inputnt {margin-bottom:0;}
.writebox.havebtn {padding-bottom:45px;}​ 

 

이 질문에 댓글 쓰기 :

답변 1

<select name="tel1">

<option>선택<option>

<option value="010">010</option>

</select> - <input type="text" size="4" name="tel2"> - <input type="text" size="4" name="tel3">

 

답변을 작성하시기 전에 로그인 해주세요.
전체 49
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT