/* * Copyright (c) 2012-2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ .dropdown { display: inline-block; position: relative; overflow: hidden; height: 20px; background: #fff; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06)); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); width:99%; margin-bottom:7px; border: 1px solid; border-color: #ccc #ccc #ccc; border-radius: 3px; } .dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 7px; right: 7px; width: 0; height: 0; border: 4px dashed; border-color: #888 transparent; pointer-events: none; } .dropdown:before { border-bottom-style: solid; border-top: none; margin-top: -2px; } .dropdown:after { margin-top: 5px; border-top-style: solid; border-bottom: none; } .dropdown-select { position: relative; overflow:visible; width: 100%; margin-top:0px; padding-bottom:0px; padding: 1px 8px 6px 5px; height: 23px; line-height: 20px; font-size: 12px; color: #62717a; text-shadow: 0 1px white; /* Fallback for IE 8 */ background: #f2f2f2; /* "transparent" doesn't work with Opera */ background: rgba(0, 0, 0, 0) !important; border: 0; border-radius: 0; -webkit-appearance: none; } .dropdown-select:focus { z-index: 3; width: 90%; color: #4fa619; outline: 0px solid #49aff2; outline: 0px solid -webkit-focus-ring-color; outline-offset: 5px; height:25px; } .dropdown-select > option { margin: 3px; padding: 6px 8px; text-shadow: none; background: #f2f2f2; border-radius: 3px; cursor: pointer; } /* Fix for IE 8 putting the arrows behind the select element. */ .lt-ie9 .dropdown { z-index: 1; } .lt-ie9 .dropdown-select { z-index: -1; } .lt-ie9 .dropdown-select:focus { z-index: 3; } /* Dirty fix for Firefox adding padding where it shouldn't. */ @-moz-document url-prefix() { .dropdown-select { padding-left: 6px; } } .dropdown-dark { background: #636363; border-color: #111 #0a0a0a black; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2); color:#a6a6a6; text-shadow:0px 1px rgba(0, 0, 0, 0.25); } .dropdown-dark:before { border-bottom-color: #aaa; } .dropdown-dark:after { border-top-color: #aaa; } .dropdown-dark .dropdown-select { color: #a6a6a6; text-shadow: 0 1px black; /* Fallback for IE 8 */ background: #444; } .dropdown-dark .dropdown-select:focus { color: #fff; } .dropdown-dark .dropdown-select > option { background: #56ab1a; text-shadow: 0 1px rgba(0, 0, 0, 0.4); }