1

I were searching the web for almost two hours and haven't found even a single example of css styling select dropdown. Most of all I was interested in z-index to show select dropdown under absolute div block. The only thing was founded is styling offsets, background-color and font, but what about other css properties? Searching for webkit shadow dom also gave no result. Really this is not possible? :(

Improve this question
0

    3 Answers 3

    Reset to default
    7

    Styling Select Box with CSS3:

    HTML:

    <label> <select> <option selected> Select Box </option> <option>Short Option</option> <option>This Is A Longer Option</option> </select> </label>​

    CSS:

    body, html { background:#444; text-align:center; padding:50px 0; } select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ @media screen and (-webkit-min-device-pixel-ratio:0) { select {padding-right:18px} } label {position:relative} label:after { content:'<>'; font:11px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:2px; padding:0 0 2px; border-bottom:1px solid #ddd; position:absolute; pointer-events:none; } label:before { content:''; right:6px; top:0px; width:20px; height:20px; background:#f8f8f8; position:absolute; pointer-events:none; display:block; }

    Demo: http://cssdeck.com/labs/styling-select-box-with-css3

    Improve this answer
    4
    • 1
      It styles select. I need to style it's dropdown.
      – VoVaVc
      CommentedAug 6, 2013 at 13:44
    • In addition to this example, you can add styles for <option> element. E.g. option{background:black;color:pink;}. This way you have some control over the dropdown
      – niklas-e
      CommentedNov 27, 2013 at 19:22
    • This is a good answer and a great idea. However, clicking the arrows in IE doesn't work.
      – Cthulhu
      CommentedApr 23, 2014 at 10:17
    • I think the solution is not adapted to the IE.
      – Arbaoui Mehdi
      CommentedApr 23, 2014 at 12:55
    0

    Here is the code.

    body { margin-top:20px; margin-left:20px; } select { padding:9px; margin: 0; border-radius:4px; -webkit-box-shadow: 0 0px 0 #ccc, 0 0px #fff inset; background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%); background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); color:black; border:none; outline:none; display: inline-block; -webkit-appearance:none; cursor:pointer; border: 1px solid #ccc; }

    Please go through this fiddle

    Improve this answer
    2
    • This styles select, but not it's dropdown. I need exacly cusomize the dropdown z-index to underlay it under block
      – VoVaVc
      CommentedAug 6, 2013 at 13:43
    • prntscr.com/3mzug6 when viewed in firefox. :(
      – Mayeenul Islam
      CommentedMay 27, 2014 at 7:23
    -4

    This will help you to style the select tag. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

    Improve this answer
    1
    • this is javascript way, I need to use only css
      – VoVaVc
      CommentedAug 7, 2013 at 6:45

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.