테스트 사이트 - 개발 중인 베타 버전입니다

전화번호 입력폼 나누기

아름이 10년 전 조회 4,653

 

 

 

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

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

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

감사합니다.

 

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

 - -

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인