셀렉트박스 CSS로 깔끔하게 처리하기 정보
셀렉트박스 CSS로 깔끔하게 처리하기첨부파일
본문
셀렉트박스를 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
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);
?>
// 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)
위내용을 추가하고
<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/)
이렇게 호출해주시면 되겠습니다~
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);
이렇게 호출해주시면 되겠습니다~
감사합니다.