셀렉트박스 CSS로 깔끔하게 처리하기 > 그누보드5 팁자료실

그누보드5 팁자료실

셀렉트박스 CSS로 깔끔하게 처리하기 정보

셀렉트박스 CSS로 깔끔하게 처리하기

첨부파일

01.png (2.1K) 133회 다운로드 2020-06-22 12:49:26
bo_w_select.zip (1.4K) 205회 다운로드 2020-06-22 12:47:09

본문

셀렉트박스를 css로 깔끔하게 변경을 해봅니다!

 

01. 셀렉트에 class="bo_w_select" 를 추가합니다.

 


<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>

 

 

첨부된 bo_w_select.zip 파일의 압축을 푸시면

화살표이미지 arrow_down_18dp.png 가 있는데

아래 스타일이 추가되는 파일과 동일 경로로 업로드해주신 후

아래와같이  추가합니다.

 


<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>

 

끝!

참 쉽죠?

추천
11

댓글 21개

안녕하세요. 해당 게시판 파일에서 css 적용을 어떻게 해야하는지 알수가 없네요. 초보자에게는 참 쉽지가 않습니다. ㅠㅠ add_stylesheet에서 아래와 같이 추가해도 적용이 되지 않아서요.

// 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)


.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;} /* 마우스오버 */

위내용을 추가하고
<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/)


add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/regist.css">', 0);

이렇게 호출해주시면 되겠습니다~
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT