셀렉트박스 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년 전 | 4402 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 175 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 236 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 441 | |
| 2687 | 2개월 전 | 292 | ||
| 2686 |
선택과집중
|
2개월 전 | 331 | |
| 2685 | 2개월 전 | 291 | ||
| 2684 | 2개월 전 | 348 | ||
| 2683 | 2개월 전 | 482 | ||
| 2682 | 2개월 전 | 278 | ||
| 2681 | 2개월 전 | 303 | ||
| 2680 |
선택과집중
|
3개월 전 | 278 | |
| 2679 | 3개월 전 | 331 | ||
| 2678 |
 Xenon54 |
3개월 전 | 429 | |
| 2677 |
Xenon54 |
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 305 | ||
| 2674 |
선택과집중
|
3개월 전 | 481 | |
| 2673 |
 ideaman |
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 260 | ||
| 2669 | 3개월 전 | 374 | ||
| 2668 | 3개월 전 | 290 | ||
| 2667 |
선택과집중
|
3개월 전 | 484 | |
| 2666 |
선택과집중
|
3개월 전 | 471 | |
| 2665 |
선택과집중
|
3개월 전 | 408 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기