폴시랩

IE8 이상의 브라우저에서 동일하게 보이는 Select Box 디자인하기

Explanation

간단하게 만들어보는 Select Box, IE8 에서도 동일한 효과를 줄 수 있다.

예제 링크 : /preview/select/select.html

소스 보기

[HTML]

<div id="select_box">
    <label for="color">color</label>
    <select id="color" title="select color">
        <option selected="selected">color</option>
        <option>red</option>
        <option>blue</option>
        <option>yellow</option>
        <option>black</option>
    </select>
</div>
[CSS]

div#select_box {
    position: relative;
    width: 200px;
    height: 40px;
    background: url(select_arrow.png) 180px center no-repeat; /* 화살표 이미지 */
    border: 1px solid #E9DDDD;
}
div#select_box label {
    position: absolute;
    font-size: 14px;
    color: #a97228;
    top: 13px;
    left: 12px;
    letter-spacing: 1px;
}
div#select_box select#color {
    width: 100%;
    height: 40px;
    min-height: 40px;
    line-height: 40px;
    padding: 0 10px;
    opacity: 0;
    filter: alpha(opacity=0); /* IE 8 */
}
[JAVASCRIPT]

jQuery(document).ready(function(){
    
    var select = $("select#color");
    
    select.change(function(){
        var select_name = $(this).children("option:selected").text();
        $(this).siblings("label").text(select_name);
    });
});
이전 댓글 19개

  1. 김지현

    셀렉트 박스 펼침이 됐을떄 검정테두리가 두껍게 생기는데...그걸 제어하는 방법은 없을까요?? 1px로 흐리게 하고 싶다면 어떻게 해야하나요...펼칩목록에...

  2. 김한솔

    안녕하세요^^ 덕분에 겨우 selectbox를 수정했습니다. 정말감사합니다. 그런데 혹시 option 같은경우도 수정할수 있을까요??

  3. Cheolguso

    안녕하세요? 첫번째 댓글이네요. 이렇게 댓글 남겨주셔서 감사합니다 :D 우선. option 요소에는 css 속성이 적용되지 않는 것으로 알고 있습니다. 하고자 한다면 select & option 태그를 사용하지 않고 다른 태그(div, ul, li..)를 사용하여 비슷하게 만들 수 있겠지만 모바일 디바이스에서 select 기능을 사용하지 못하게 되니 UX적으로도, 스크린리더기를 통한 접근성에도 좋지 않은 방법이 되리라 생각이 듭니다. 차후에 더 나은 select box 스타일링 방법을 찾게되면 다시 포스팅 하도록 하겠습니다.

  4. 김한솔

    Cheolguso님 답변감사합니다. selectbox모양으로 태그를 이용하여 비슷하게 만드는 것 외에는 아직 안되는것이군요.. ㅜㅜ

  5. cheolguso

    이 글이 도움이 되었다고 하시니 저도 너무 기분이 좋아요ㅎ 이렇게 댓글까지 남겨주셔서 제가 더 감사해요 ^^

  6. 라떼9

    다른 글들은 봐도 이해안됬었는데, 이 글은 너무나 쉽게 이해가 쏙 되네요ㅠㅠ select 박스때문에 헤매고 있었는데 고맙습니다!! ^^

  7. kelly

    이거...한화면에 셀렉트가 많을때는 어떻게 사용하면될까요^^;;

  8. cheolguso

    안녕하세요, 제가 확인이 늦었네요. 말씀하신 부분이 정확하게 어떤 부분인지 잘 모르겠네요.. 셀렉트 박스가 펼쳐졌을때에는 기본적으로 스타일이 들어가지 않는 것으로 알고 있습니다. 해당 상황을 확인해야 정확하게 알 수 있을것 같습니다 ~

  9. css난독증

    안녕하세요.. ie8에서 하니 깨지는 현상이 발생하네요 ㅠㅠ

  10. cheolguso

    안녕하세요? 확인해보니 실수로 select태그에 css속성 'filter: alpha(opacity=0);' 을 주지 않았네요. 죄송합니다... 지금은 수정하였습니다. 다시 한번 확인해보시고 안되시면 다시 댓글 남겨주세요. 댓글 남겨주셔서 감사합니다! :D

  11. cheolguso

    더 도움이 되어 드리지 못해 아쉬움이 남네요... 김한솔님, 새해 복 많이 받으시고 하시는 일 좋은 일만 가득하시길 바랄게요 ~

  12. 폼 필드(select 박스) 디자인 #2 &#8211; Tarot&#039;s Design &amp; Publishing

    [&#8230;] Select Box – CSS 효과주기 [&#8230;]

  13. 젤조

    select option 디자인적용도 가능할까요? option의 padding이나, 마우스오버될때 효과를 넣고 싶은데 css만으로 가능한지 질문드립니다. select option{height:33px;font-size:14px;line-height:33px;color:#777;padding:10px;background-color:#f6f6f6;} 이렇게 적용시켰더니 font-size, color, background-color는 적용이 되는데 height,padding,line-height 속성은 적용이 안되네요.

  14. cheolguso

    도움이 되었다니 다행이에요 :D 이 댓글 때문인지 오늘 하루가 좋았던거 같아요, 감사합니다 ~

  15. cheolguso

    댓글 남겨주셔서 감사합니다 :)

  16. cheolguso

    안녕하세요, 지금은 간단한 이해를 위해 id를 선택자를 주었는데요, html과 css모두 class로 바꾸고 스크립트 부분을 var select = $(".color"); 이런식으로 바꾸시면 될거 같습니다 :D

  17. 1029

    감사합니다 이 글은 꼭 지우지 말아주세요...

  18. yhoomor

    잘 활용하여 사용하겠습니다. 정말 유용한 내용이었어요. 감사드려요 ^^

  19. cheolguso

    안녕하세요? 기본적으로 select option 에는 스타일 적용이 안된다고 생각하는게 좋을거 같아요. 브라우저나 os에 따라서 적용에도 차이가 있으니까요, 보통은 스타일을 꼭 주어야한다면 다른 요소(li, div...)로 드롭다운 메뉴를 만들어서 셀렉트 기능을 대신해서 사용하는게 좋을꺼 같아요 :D