"select Box"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pixelthing/pen/JEFHL?limit=all&page=33&q=box" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style class="cp-pen-styles">/*** USWITCH SELECT ** */ .us-form select { position: relative; -webkit-appearance: button; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: middle; height: 2.2em; margin: 2px; padding: 0.3em 0.6em; background: white; border: 1px solid #aaaaaa; border-radius: 0.3em; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.85em; font-weight: normal; overflow: hidden; text-shadow: 0 1px 0 white; -webkit-transition: box-shadow 200ms, border-color 200ms; -moz-transition: box-shadow 200ms, border-color 200ms; transition: box-shadow 200ms, border-color 200ms; white-space: nowrap; } .us-form select option { text-shadow: none; } .us-form select:disabled, .us-form select:disabled:hover { color: #cccccc !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } .us-form select.error { color: #bf212e; border-color: #bf212e; } .us-form select.input-big { font-size: 17px; } .us-form.error select, .us-form .error select { color: #bf212e; border-color: #bf212e; } .boxshadow .us-form select:not([size]):focus { outline: none; border-color: #66ccff; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 4px #66ccff; } .boxshadow.no-touch .us-form select:not([size]):hover { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px #ffff88; } .cssgradients .us-form select:not([size]) { border-color: #ececec; background-color: #ececec; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #ececec)); background-image: -webkit-linear-gradient(top, white, #ececec); background-image: -moz-linear-gradient(top, white, #ececec); background-image: -ms-linear-gradient(top, white, #ececec); background-image: -o-linear-gradient(top, white, #ececec); background-image: linear-gradient(top, white, #ececec); } .cssgradients .us-form select:not([size]).focus { border-color: #66ccff; } .cssgradients .us-form select:not([size]).error { border-color: #bf212e; } .cssgradients .us-form.error select, .cssgradients .us-form .error select { border-color: #bf212e; } /* ie9/10 */ @media screen and (min-width: 0 \0) { .us-form select:not([size])::-ms-expand { background: transparent; border: none; width: 12px; padding-left: 5px; } .boxshadow .us-form select:not([size]) { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); } .boxshadow .us-form select:not([size]):focus { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 4px #66ccff; } .no-touch.boxshadow .us-form select:not([size]):hover { border-color: white; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px #ffff88; } } /* firefox - use a wrap */ @-moz-document url-prefix() { .us-form select:not([size]) { max-width: 999px !important; } .us-form option { padding-right: 10px; } .us-form-select-wrap { position: relative; display: inline-block; vertical-align: baseline; font-size: 0.9em; } .us-form-select-wrap.input-big { font-size: 17px; } .us-form-select-wrap:before { content: ""; position: absolute; right: 0.5em; top: 0.3em; z-index: 11; bottom: 0.3em; width: 1.55em; background-color: #ececec; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #ececec)); background-image: -webkit-linear-gradient(top, white, #ececec); background-image: -moz-linear-gradient(top, white, #ececec); background-image: -ms-linear-gradient(top, white, #ececec); background-image: -o-linear-gradient(top, white, #ececec); background-image: linear-gradient(top, white, #ececec); pointer-events: none; } .us-form-select-wrap:after { content: "\25bc"; position: absolute; right: 5px; top: 0.9em; bottom: 0.8em; z-index: 12; font-size: 0.6em; font-family: "uswitch-icon", helvetica, arial, sans-serif; line-height: 1; padding: 0.5em 4px 0; color: #999999; border-left: 1px solid white; box-shadow: -1px 0 0 #dddddd; text-shadow: 0 1px 0 white; pointer-events: none; } } /* webkit */ @media all and (-webkit-min-device-pixel-ratio: 0) { .us-form select:not([size]) { padding-right: 30px; } .boxshadow .us-form select:not([size]) { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAYAAADafVyIAAAAzElEQVRIDWP8//8/Ay0BE8zws2fPgmyium1wC2AWUZsetYBgiI4GEcEgYiGoAqqgq6trGZAZia4emFGXlZeXR6OLw/hEx8G/f/+ygYY9hWkE0UD+IyCVhSyGzibagoqKiveMjIyJIHNBhgAN/wekYoGu/wji4wJEWwAyoKysbDfQ4ClQw7qAhh/CZTBMnOg4gGl4+fJluYSEhNC9e/fqYGJ4aaCLQN5lOHPmDJACAzAfyKIKTVIQ4XUpDslRC3AEDEJ46AcRIyg50hIAANnugKRDswA6AAAAAElFTkSuQmCC"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #ededed)); background-image: url("data:image/svg+xml;utf8,<svg width='24px' height='22px' version='1.1' xmlns='http://www.w3.org/2000/svg'><title>select-arrow</title><g id='arrow-group' fill='rgb(223,223,223)' fill-rule='evenodd'><path d='M10,9 L13.4690265,14 L17,9 L10,9 Z M10,9' id='arrow' fill='rgb(155,155,155)'></path><path d='M2,1 L2,21 L3,21 L3,1 L2,1 Z M2,1' id='dark-line' fill='rgb(213,213,213)'></path><path d='M3,1 L3,21 L4,21 L4,1 L3,1 Z M3,1' id='light-line' fill='rgb(254,255,255)'></path></g></svg>"), -webkit-linear-gradient(-90deg, white 0%, #ededed 100%); background-repeat: no-repeat, repeat; background-position: 100% 50%, 0 0; } .boxshadow .us-form select:not([size]).error { color: #bf212e; border-color: #bf212e; } .boxshadow .us-form.error select:not([size]), .boxshadow .us-form .error select:not([size]) { color: #bf212e; border-color: #bf212e; } .boxshadow .us-form select:not([size]):focus { box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 4px #66ccff; } .no-touch.boxshadow .us-form select:not([size]):hover { border-color: #c8c8c8; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px #ffff88; } } /* multiple line select control (eg <select size="10">) */ .us-form select[size] { -webkit-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; display: inline-block; height: auto; margin: 2px; padding: 0.3em 0 0.3em 0.4em; border: 1px solid #c4c0c0; border-radius: 2px; box-shadow: 0px 3px 2px #eeeeee inset; font-family: "Lucida Grande", helvetica, arial, sans-serif; font-size: 0.85em !important; -webkit-transition: box-shadow 200ms, border-color 200ms; -moz-transition: box-shadow 200ms, border-color 200ms; -ms-transition: box-shadow 200ms, border-color 200ms; transition: box-shadow 200ms, border-color 200ms; vertical-align: middle; overflow: scroll; } .us-form select[size] .error { border-color: #bf212e; } .us-form select[size]:focus { outline: none; color: #333333; border-color: #66ccff; box-shadow: 1px 3px 2px #eeeeee inset, 0 0 4px #66ccff; } .us-form select[size]:focus:hover { outline: none; color: #333333; border-color: #66ccff; box-shadow: 1px 3px 2px #eeeeee inset, 0 0 4px #66ccff; } .us-form.error select[size], .us-form .error select[size] { border-color: #bf212e; color: inherit; } .no-touch .us-form select[size]:hover { border-color: #c4c0c0; box-shadow: 1px 3px 2px #eeeeee inset, 0 0 0 2px #ffff88; } /* hidden */ .us-form select.hidden { display: none; } /* EXAMPLE STYLING */ body { font-family: "FS Elliot Web Bold",avenir,sans-serif; } th, td { vertical-align: baseline; padding: 10px; font-weight: normal; text-align: left; } .toprow th { border-right: none; border-bottom: 1px solid #eee; } th, .toprow th:first-child { border-right: 1px solid #eee; } .darktest td, .darktest th { color: #fff; background: #666; } .error td, .error th { color: #900; background: #FFFFE5; }</style></head><body> <link href='//www.uswitch.com/webfont/fonts/v16/stylesheet.css' media='all' rel='stylesheet' type='text/css' /> <!-- only loaded in for a consistently sized drop arrow for firefox, but included by default in uSwitch, so carries no extra penalty for us --> <form> <table width="100%" cellspacing="0" border="0"> <tr class="toprow"> <th></th> <th>unwrapped</th> <th>wrapped</th> </tr> <!-- REGULAR --> <tr> <th>unstyled</th> <td class="unwrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> <td> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> </tr> <!-- DEFAULT --> <tr class="us-form"> <th>styled</th> <td class="unwrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> <td> <span class="us-form-select-wrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </span> </td> </tr> <!-- ERROR --> <tr class="us-form error"> <th>error</th> <td class="unwrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> <td> <span class="us-form-select-wrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </span> </td> </tr> <!-- DISABLED --> <tr class="us-form"> <th>disabled</th> <td class="unwrap"> <select disabled="disabled"> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> <td> <span class="us-form-select-wrap"> <select disabled="disabled"> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </span> </td> </tr> <!-- DEFAULT ON DARK --> <tr class="us-form darktest"> <th>on dark</th> <td class="unwrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </td> <td> <span class="us-form-select-wrap"> <select> <option>select box</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> </span> </td> </tr> <!-- BIG --> <tr class="us-form" style="font-size:30px;"> <th>big</th> <td class="unwrap"> <select> <option>select box</option> <option>opt 1</option> <option>opt 2</option> <option>opt 3</option> <option>opt 4</option> </select> </td> <td> <span class="us-form-select-wrap"> <select> <option>select box</option> <option>opt 1</option> <option>opt 2</option> <option>opt 3</option> <option>opt 4</option> </select> </span> </td> </tr> </table> </form> </body></html>

Related: See More


Questions / Comments: