개발·운영 팁

작은 팁일지라도, 누군가에게는 큰 정보가 될 수 있습니다.

소는누가키워

셀렉트박스 디자인 변경하기

[테라보드]
  • 조회 : 1,889 / 댓글 : 0


a.png









 

아래는 예제 소스입니다.




 


<style type="text/css">
.select-wrap {font-size:0; line-height:0;}
.select-wrap .select-block {margin:0px 0 0 -5px;}
.select-wrap .select-block:first-child {margin-top:-5px;}
.select-wrap .selectbox {position:relative; width:80px; height:40px; text-align:left; margin:5px 0 0 5px; display:inline-block; vertical-align:top;}
.select-wrap .selectbox .select,
.select-wrap .selectbox .select {background-color:#ffffff; border:1px solid #e8e8e8; position:absolute; left:0; top:0; width:calc(100% - 2px); cursor:pointer;}
.select-wrap .selectbox .select .block {position:relative;}
.select-wrap .selectbox .select .block {font-weight:700; line-height:35px; font-size:14px; color:#acacac;}
.select-wrap .selectbox .select .block span.text {overflow-x:hidden; height:38px; display:block; padding:0 7px;}
.select-wrap .selectbox .select .block .option {display:none; position:absolute; left:-1px; top:38px; width:calc(100% + 2px);}
.select-wrap .selectbox .select .block .option ul.array {overflow:auto; overflow-x:hidden; max-height:500px; background-color:#ffffff; border:1px solid #e8e8e8;}
.select-wrap .selectbox .select .block .option ul.array li {overflow-x:hidden; padding:0 7px; display:block; vertical-align:middle; height:26px; border-top:1px solid #e8e8e8;}
.select-wrap .selectbox .select .block .option ul.array li {font-weight:400; line-height:26px; font-size:13px; color:#4b4b4b;}
.select-wrap .selectbox .select .block .option ul.array li:first-child {border-top:0;}
.select-wrap .selectbox .select .block .option ul.array li:hover {background-color:#f1f1f1;}
.select-wrap .selectbox .select .block .option ul.array li.on {color:#ff6f99;}
.select-wrap .selectbox.opt .select {border:1px solid #ff6f99;}
.select-wrap .selectbox.opt .select span.text {color:#ff6f99;}
.select-wrap .selectbox.opt .select .block .option {display:block;}
.select-wrap .selectbox.opt .select .block .option ul.array {border:1px solid #ff6f99;}

.select-wrap .selectbox:nth-child(1) {width:150px;}
.select-wrap .selectbox:nth-child(3) {width:200px;}
</style>

<script type="text/javascript">
function fSort()
{

}
</script>

<div class="select-wrap">
<div class="select-block">
<!-- selectbox //-->
<div class="selectbox">
<div class="select" rel="fSort">
<div class="block">
<span class="text"></span>
<div class="option"><input type="hidden" name="aa" value="<?=text($aa)?>" class="add" />
<ul class="array">
<li data-value=''>선택하세요.</li>
<li data-value='1'>1</li>
<li data-value='2'>2</li>
<li data-value='3'>3</li>
<li data-value='4'>4</li>
<li data-value='5'>5</li>
</ul>
</div>
</div>
</div>
</div>
<!-- selectbox //-->
<!-- selectbox //-->
<div class="selectbox">
<div class="select" rel="fSort">
<div class="block">
<span class="text"></span>
<div class="option"><input type="hidden" name="bb" value="<?=text($bb)?>" class="add" />
<ul class="array">
<li data-value=''>선택하세요.</li>
<li data-value='1'>1</li>
<li data-value='2'>2</li>
<li data-value='3'>3</li>
<li data-value='4'>4</li>
<li data-value='5'>5</li>
</ul>
</div>
</div>
</div>
</div>
<!-- selectbox //-->
<!-- selectbox //-->
<div class="selectbox">
<div class="select" rel="fSort">
<div class="block">
<span class="text"></span>
<div class="option"><input type="hidden" name="cc" value="<?=text($cc)?>" class="add" />
<ul class="array">
<li data-value=''>선택하세요.</li>
<li data-value='1'>1</li>
<li data-value='2'>2</li>
<li data-value='3'>3</li>
<li data-value='4'>4</li>
<li data-value='5'>5</li>
</ul>
</div>
</div>
</div>
</div>
<!-- selectbox //-->
</div>
</div>


 

  • 비회원
  • 작성자
  • 비밀번호
  • 취소

대댓글 작성

비밀번호를 입력하세요.

비밀번호
  • 전체 카테고리
  • 테라보드
  • jQuery
  • JavasCript
  • CSS
  • Linux
  • Apache
  • PHP
  • MySQL
  • 기타
    New 0 / All 168
    25개씩 보기
    • 25개씩 보기
    • 50개씩 보기
    • 100개씩 보기
      번호 분류 제목 작성자 작성일 조회 추천
      공지 테라보드 파일구조
      공지 로그인한 회원정보 출력하기
      공지 최근 게시물 뽑기(1)
      공지 템플릿(레이아웃) 상단, 하단 만들기(3)
      170 PHP Warning: session_start(): Failed to read session data: user (path: /var/lib/php/session) in 소는누가키워 03-05 289 0
      169 MySQL 필드값 추가 소는누가키워 04-06 610 0
      168 기타 내 컴퓨터에서 DNS 정보 갱신 소는누가키워 12-01 924 0
      167 PHP 소수점 버리기 소는누가키워 11-28 911 0
      166 기타 DIV 프린트 div print 소는누가키워 09-04 2,580 0
      165 CSS IE table-cell after height 100%(1) 소는누가키워 08-23 1,430 0
      164 jQuery 스크롤바 검사 테라보드 06-02 963 0
      163 jQuery 만14세 체크 테라보드 06-02 1,113 0
      162 테라보드 셀렉트박스 디자인 변경하기 소는누가키워 03-30 1,890 1
      161 JavasCript DOM Document Object 소는누가키워 11-15 1,427 0
      160 jQuery fadeOut remove 소는누가키워 09-22 1,643 0
      159 PHP foreach 소는누가키워 09-22 1,510 0
      158 PHP .0 숫자 제거하기 소는누가키워 09-21 1,861 0
      157 jQuery each return false 소는누가키워 09-02 1,437 0
      156 테라보드 7일간 댓글 많은 게시물 뽑아오기(3) 소는누가키워 08-30 1,789 0
      155 테라보드 기본 페이지 만들기 2 소는누가키워 06-01 1,857 3
      154 테라보드 기본 페이지 만들기 소는누가키워 06-01 1,919 3
      153 테라보드 DB 테이블 일괄적으로 InnoDB 으로 변경하기 소는누가키워 05-24 2,045 0
      152 CSS IE 10+ CSS 적용하기 소는누가키워 05-19 1,845 0
      151 테라보드 메뉴에 NEW 표시해주기 소는누가키워 05-10 1,977 1
      150 테라보드 500 오류 뜰 때 2 소는누가키워 04-28 2,460 0
      149 테라보드 게시판 목록에서 에디터 이미지 경로 뽑아내기(1) 소는누가키워 04-28 1,702 0
      148 기타 카페24 테라보드 500오류가 뜰 때(1) 테라보드 04-27 2,642 2
      147 기타 네이버 사이트 등록, 웹마스터 등록하기 테라보드 04-27 2,994 0
      146 기타 Cloudflare SSL 적용하기 테라보드 04-21 2,749 0

      Warning: session_start(): Failed to read session data: user (path: /var/lib/php/session) in

      [PHP]소는누가키워 03-05

      필드값 추가

      [MySQL]소는누가키워 04-06

      내 컴퓨터에서 DNS 정보 갱신

      [기타]소는누가키워 12-01

      소수점 버리기

      [PHP]소는누가키워 11-28

      DIV 프린트 div print

      [기타]소는누가키워 09-04

      IE table-cell after height 100%(1)

      [CSS]소는누가키워 08-23

      스크롤바 검사

      [jQuery]테라보드 06-02

      만14세 체크

      [jQuery]테라보드 06-02

      셀렉트박스 디자인 변경하기

      [테라보드]소는누가키워 03-30

      DOM Document Object

      [JavasCript]소는누가키워 11-15

      fadeOut remove

      [jQuery]소는누가키워 09-22

      foreach

      [PHP]소는누가키워 09-22

      .0 숫자 제거하기

      [PHP]소는누가키워 09-21

      each return false

      [jQuery]소는누가키워 09-02

      7일간 댓글 많은 게시물 뽑아오기(3)

      [테라보드]소는누가키워 08-30

      기본 페이지 만들기 2

      [테라보드]소는누가키워 06-01

      기본 페이지 만들기

      [테라보드]소는누가키워 06-01

      DB 테이블 일괄적으로 InnoDB 으로 변경하기

      [테라보드]소는누가키워 05-24

      IE 10+ CSS 적용하기

      [CSS]소는누가키워 05-19

      메뉴에 NEW 표시해주기

      [테라보드]소는누가키워 05-10

      500 오류 뜰 때 2

      [테라보드]소는누가키워 04-28

      게시판 목록에서 에디터 이미지 경로 뽑아내기(1)

      [테라보드]소는누가키워 04-28

      카페24 테라보드 500오류가 뜰 때(1)

      [기타]테라보드 04-27

      네이버 사이트 등록, 웹마스터 등록하기

      [기타]테라보드 04-27

      Cloudflare SSL 적용하기

      [기타]테라보드 04-21

      • 테라보드
      • 대표자 : 장상재
      • 통신판매업신고번호 : 2009-서울마포-0958
      • 개인정보 책임자 : 박정훈
      • 경기도 고양시 일산동구 백마로 223 현대에뜨레보 206호