/* * Copyright (c) 2012-2013 Thibaut Courouble * http://www.cssflow.com * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ .container > .dropdown { margin: 0 20px; vertical-align: top; } .dropdown { display: inline-block; position: relative; overflow: hidden; height: 25px; width: 150px; width:100%; margin-bottom:10px; background: #fff; border: 1px solid; border-color: #ccc #ccc #ccc; border-radius: 3px; background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } .dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 9px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #888 transparent; pointer-events: none; } .dropdown:before { border-bottom-style: solid; border-top: none; } .dropdown:after { margin-top: 7px; border-top-style: solid; border-bottom: none; } .dropdown-select { position: relative; width: 130%; margin: 0; padding: 6px 8px 6px 10px; height: 28px; line-height: 14px; 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: 100%; color: #394349; outline: 2px solid #49aff2; outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px; } .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: linear-gradient(to bottom, transparent, 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); background-image: url(trenner.gif); background-repeat:no-repeat; background-position:right 0px ; } .dropdown-dark:before { border-bottom-color: #aaa; } .dropdown-dark:after { border-top-color: #aaa; } .dropdown-dark .dropdown-select { color: #fff; text-shadow: 0 1px black; /* Fallback for IE 8 */ background: #444; } .dropdown-dark .dropdown-select:focus { color: #ccc; } .dropdown-dark .dropdown-select > option { background: #444; text-shadow: 0 1px rgba(0, 0, 0, 0.4); }