크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 팁자료실

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

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

첨부파일

첨부파일 01.png (2.1K) 4회 다운로드 2020-06-22 12:49:26
첨부파일 bo_w_select.zip (1.4K) 17회 다운로드 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>

 

끝!

참 쉽죠?

추천9

댓글 전체

전체 1,693 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT