|
-
-
- select{
- padding: 0!important;
- }
- /**
- * Variables
- */
- /**
- * Wrapper
- */
- .combo-select {
- position: relative;
- max-width: 400px;
- margin-bottom: 15px;
- font: 100% Helvetica, Arial, Sans-serif;
- border: 1px #ccc solid;
- border-radius: 3px; }
- .combo-select .combo-input {
- margin-bottom: 0; }
-
- /**
- * Input field
- */
- .combo-input {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin: 0;
- text-overflow: ellipsis;
- white-space: nowrap;
- border: none;
- width: 100%;
- box-sizing: border-box;
- padding: 12px;
- padding-right: 60px;
- border-radius: 3px; }
- .combo-input:focus {
- outline: none; }
-
- /**
- * Arrow
- */
- .combo-arrow {
- position: absolute;
- right: 0;
- top: 0;
- height: 100%;
- cursor: pointer;
- text-align: center;
- font-size: 14px;
- width: 40px;
- font-size: 12px;
- color: #999999; }
- .combo-arrow:before {
- content: " ";
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid #cccccc;
- display: block;
- width: 0;
- height: 0;
- top: 0;
- right: 15px;
- bottom: 0;
- position: absolute;
- margin: auto 0; }
-
- /**
- * When opened
- */
- .combo-open .combo-arrow {
- border-color: #51A7E8; }
- .combo-open .combo-arrow:before {
- border-top: none;
- border-bottom: 5px solid #cccccc; }
-
- /**
- * When focused
- */
- .combo-focus {
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- border-color: #51A7E8; }
- .combo-focus input {
- border-color: #51A7E8; }
-
- /**
- * Hide native select
- */
- .combo-select select {
- position: absolute;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 0;
- -webkit-appearance: none;
- opacity: 0; }
-
- @media only screen and (min-width: 960px) {
- .combo-select select {
- left: -1px;
- top: -1px;
- width: 0;
- height: 0;
- margin: 0; } }
- /**
- * Selected option
- */
- .option-selected {
- background-color: #eee; }
-
- /**
- * Hovered option
- */
- .option-hover {
- background-color: #006eab;
- color: #fff; }
-
- /**
- * Option item
- */
- .option-item {
- cursor: pointer;
- border-bottom: 1px #e3e3e3 solid; }
- .option-item:hover {
- background-color: #006eab;
- color: #fff; }
- .option-item:last-child {
- border-bottom: none; }
-
- /**
- * Disabled and optgroups
- */
- .option-group {
- cursor: text;
- font-weight: 600;
- background: #e1e1e1;
- border: 1px #ccc solid;
- border-width: 1px 0; }
-
- /**
- * Disabled
- */
- .option-disabled {
- opacity: 0.5; }
-
- /**
- * Dropdown
- */
- .combo-dropdown {
- position: absolute;
- z-index: 1;
- top: 100%;
- left: 0;
- min-width: 100%;
- max-width: 300px;
- max-height: 300px;
- margin: 0;
- padding: 0;
- display: none;
- overflow-y: auto;
- background: #fff;
- border: 1px solid #999999;
- border-radius: 0;
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- box-sizing: border-box; }
- .combo-dropdown li {
- list-style: none;
- padding: 8px 1em;
- margin: 0; }
-
- /**
- * On Active
- */
- .combo-open .combo-dropdown {
- display: block; }
-
- /**
- * Search marker
- */
- .combo-marker {
- text-decoration: underline; }
|