셀렉트박스 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년 전 | 4427 | ||
| 2574 | 10개월 전 | 561 | ||
| 2573 | 10개월 전 | 937 | ||
| 2572 |
두리삼촌v
|
10개월 전 | 609 | |
| 2571 | 10개월 전 | 556 | ||
| 2570 | 10개월 전 | 599 | ||
| 2569 |
두리삼촌v
|
10개월 전 | 638 | |
| 2568 |
두리삼촌v
|
10개월 전 | 666 | |
| 2567 |
두리삼촌v
|
10개월 전 | 462 | |
| 2566 |
두리삼촌v
|
10개월 전 | 443 | |
| 2565 | 10개월 전 | 740 | ||
| 2564 | 10개월 전 | 670 | ||
| 2563 | 10개월 전 | 473 | ||
| 2562 | 10개월 전 | 1030 | ||
| 2561 |
 수평선1203 |
11개월 전 | 675 | |
| 2560 | 11개월 전 | 919 | ||
| 2559 | 11개월 전 | 657 | ||
| 2558 |
 간장게장같은남자 |
11개월 전 | 504 | |
| 2557 | 11개월 전 | 656 | ||
| 2556 | 11개월 전 | 957 | ||
| 2555 | 11개월 전 | 1338 | ||
| 2554 | 11개월 전 | 755 | ||
| 2553 |
수평선1203 |
11개월 전 | 748 | |
| 2552 | 11개월 전 | 676 | ||
| 2551 | 11개월 전 | 864 | ||
| 2550 | 11개월 전 | 767 | ||
| 2549 |
 dkstmdc |
11개월 전 | 717 | |
| 2548 | 11개월 전 | 1031 | ||
| 2547 | 11개월 전 | 673 | ||
| 2546 | 11개월 전 | 1207 | ||
| 2545 | 11개월 전 | 663 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기