| select { |
| padding:5px; |
| margin: 0; |
| -webkit-border-radius:4px; |
| -moz-border-radius:4px; |
| border-radius:4px; |
| -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px @font-color inset; |
| -moz-box-shadow: 0 3px 0 #ccc, 0 -1px @font-color inset; |
| box-shadow: 0 3px 0 #ccc, 0 -1px @font-color inset; |
| background: @border-faded-color; |
| color: @font-color; |
| border:none; |
| outline:none; |
| display: inline-block; |
| -webkit-appearance:none; |
| -moz-appearance:none; |
| appearance:none; |
| cursor:pointer; |
| text-align: center; |
| } |
| |
| /* 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.dropdown {position:relative} |
| label.dropdown:after { |
| content:'<>'; |
| font:11px "Consolas", monospace; |
| color: @font-color; |
| -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 @border-faded-color; |
| position:absolute; |
| pointer-events:none; |
| } |
| label.dropdown:before { |
| content:''; |
| right:6px; top:0px; |
| width:20px; height:15px; |
| background: @border-faded-color; |
| position:absolute; |
| pointer-events:none; |
| display:block; |
| } |