셀렉트박스 CSS로 깔끔하게 처리하기
셀렉트박스를 css로 깔끔하게 변경을 해봅니다!
01. 셀렉트에 class="bo_w_select" 를 추가합니다.
[code]
<select class="bo_w_select">
<option value="">분류선택1</option>
<option value="">분류선택2</option>
<option value="">분류선택3</option>
<option value="">분류선택4</option>
<option value="">분류선택5</option>
</select>
[/code]
첨부된 bo_w_select.zip 파일의 압축을 푸시면
화살표이미지 arrow_down_18dp.png 가 있는데
아래 스타일이 추가되는 파일과 동일 경로로 업로드해주신 후
아래와같이 추가합니다.
[code]
<style>
.bo_w_select {
width: 100%; /* 가로 사이즈 */
padding: 10px; /* 내부여백 */
padding-left: 12px;
border: 1px solid #ddd;
background: url(./arrow_down_18dp.png) no-repeat right 50%; /* 화살표 위치 */
background-size: 30px; /* 화살표 크기 */
border-radius: 4px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
color: #000;
outline:none;
}
.bo_w_select:hover {border: 1px solid #aaa;} /* 마우스오버 */
</style>
[/code]
끝!
참 쉽죠?
댓글 21개
감사합니다~
감사합니다!
잘쓰겠습니다^^
감사합니다 ^^
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
add_stylesheet('<link rel="stylesheet" href="/css/regist.css">', 1);
?>
css파일을 꼭 안넣어도 기존에 있던 css 파일 (skin/member/basic/style.css) 을 여셔서
아래 스타일만 추가해주셔도 되세요~
(테마를 사용중이시면 theme/basic/skin/member/basic/style.css)
[code]
.bo_w_select {
width: 100%; /* 가로 사이즈 */
padding: 10px; /* 내부여백 */
padding-left: 12px;
border: 1px solid #ddd;
background: url(./arrow_down_18dp.png) no-repeat right 50%; /* 화살표 위치 */
background-size: 30px; /* 화살표 크기 */
border-radius: 4px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
color: #000;
outline:none;
}
.bo_w_select:hover {border: 1px solid #aaa;} /* 마우스오버 */
[/code]
위내용을 추가하고
<select> 에 class="bo_w_select" 를 추가해주시면 됩니다~
동봉된 arrow_down_18dp.png파일은
skin/member/basic/style.css 파일과 같은 위치에 업로드 하시면 되겠습니다!
----------------------------------
regist.css 파일을 불러오려고 하시는 거면
/skin/member/basic/ 경로에 regist.css 파일을 업로드하시고
(테마를 사용중이시면 /theme/basic/skin/member/basic/)
[code]
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/regist.css">', 0);
[/code]
이렇게 호출해주시면 되겠습니다~
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4417 | ||
| 2664 |
선택과집중
|
4개월 전 | 573 | |
| 2663 |
 GREENnBLUE |
4개월 전 | 624 | |
| 2662 |
GREENnBLUE |
4개월 전 | 576 | |
| 2661 |
선택과집중
|
4개월 전 | 508 | |
| 2660 | 4개월 전 | 588 | ||
| 2659 |
Modify
|
4개월 전 | 654 | |
| 2658 |
선택과집중
|
4개월 전 | 415 | |
| 2657 | 4개월 전 | 452 | ||
| 2656 |
 레이딩솔루션 |
4개월 전 | 964 | |
| 2655 |
선택과집중
|
4개월 전 | 549 | |
| 2654 | 5개월 전 | 404 | ||
| 2653 |
선택과집중
|
5개월 전 | 586 | |
| 2652 | 5개월 전 | 396 | ||
| 2651 | 5개월 전 | 446 | ||
| 2650 |
선택과집중
|
5개월 전 | 328 | |
| 2649 |
선택과집중
|
5개월 전 | 424 | |
| 2648 | 5개월 전 | 442 | ||
| 2647 |
welcome
|
5개월 전 | 545 | |
| 2646 |
디지털홍익인간
|
5개월 전 | 453 | |
| 2645 | 5개월 전 | 467 | ||
| 2644 |
선택과집중
|
5개월 전 | 514 | |
| 2643 | 5개월 전 | 458 | ||
| 2642 | 5개월 전 | 372 | ||
| 2641 | 5개월 전 | 359 | ||
| 2640 | 5개월 전 | 394 | ||
| 2639 | 5개월 전 | 1361 | ||
| 2638 |
 마르스컴퍼니 |
5개월 전 | 515 | |
| 2637 |
세르반데스
|
5개월 전 | 402 | |
| 2636 |
선택과집중
|
6개월 전 | 570 | |
| 2635 |
선택과집중
|
6개월 전 | 684 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기