/** * Selectator jQuery Plugin * A plugin for select elements * version 1.1, Dec 11th, 2015 * by Ingi P. Jacobsen */ /* reset */ .selectator_element * { box-sizing: border-box; -moz-box-sizing: border-box; text-decoration: none; } .selectator_element img { display: block; } .selectator_element.focused { box-shadow: 0 0 1px #39f; } /* dimmer */ #selectator_dimmer { background-color: rgba(0,0,0,.1); width: 100%; height: 100%; position: fixed; z-index: 100; } /* Main box */ .selectator_element { border: 1px solid #d0d1d4; box-sizing: border-box; background-color: #fff; display: inline-block; text-decoration: none; vertical-align: middle; /*圆角*/ border-radius: 5px; } .selectator_element.multiple { padding-right: 20px !important; padding-bottom: 5px !important; } .selectator_element.single { height: 36px; padding: 7px 10px !important; } .selectator_element:after { position: absolute; cursor: pointer; content: '\25BC'; font-size: 90%; right: 4px; color: #aaa; top: 50%; line-height: 0; } /* chosen items holder */ .selectator_chosen_items { display: inline; } .single .selectator_chosen_items { display: block; } /* chosen item */ .selectator_chosen_item { display: inline-block; background-color: #39f; border-radius: 2px; color: #fff; padding: 4px 20px 4px 4px; font-size: 13px; margin: 2px; position: relative; vertical-align: top; } .single .selectator_chosen_item { background-color: transparent; color: #000; display: block; text-decoration: none; padding: 0; margin: 0; font-size: inherit; } .multiple .selectator_chosen_item { margin: 5px 0 0 5px; padding: 3px 20px 2px 5px; } /* chosen item - left */ .selectator_chosen_item_left { float: left; width: 25px; } .selectator_chosen_item_left img { height: 23px; } .multiple .selectator_chosen_item_left { float: left; width: 22px; } .multiple .selectator_chosen_item_left img { height: 18px; } /* chosen item - title */ .selectator_chosen_item_title { } .single .selectator_chosen_item_title { height: auto; } .multiple .selectator_chosen_item_title { float: left; padding-top: 2px; } /* chosen item - subtitle */ .selectator_chosen_item_subtitle { display: none; } /* chosen item - right */ .selectator_chosen_item_right { float: right; width: 20px; background-color: #ccc; font-size: 15px; color: #fff; text-align: center; border-radius: 3px; padding: 3px; margin-right: 20px; } .multiple .selectator_chosen_item_right { display: none; } /* chosen item remove button */ .selectator_chosen_item_remove { display: inline-block; font-weight: bold; color: #fff; margin: 0 0 0 5px; padding: 6px 5px 4px 5px; cursor: pointer; font-size: 11px; line-height: 10px; vertical-align: top; border-radius: 0 2px 2px 0; position: absolute; right: 0; top: 0; bottom: 0; } .selectator_chosen_item_remove:hover { color: #000; background-color: #8cf; } .single .selectator_chosen_item_remove { display: none; } .multiple .selectator_chosen_item_remove { padding: 7px 5px 4px 5px; } .multiple .selectator_chosen_item_remove:hover { } .multiple .selectator_input, .multiple .selectator_textlength { padding: 1px 0 0 0; margin: 7px 0 2px 5px; } /* input box */ .selectator_input, .selectator_textlength { border: 0; display: inline-block; margin: 0; background-color: transparent; font-size: 13px; outline: none; padding: 6px 0 0 0; } .single .selectator_input { border: 1px solid #7f9db9; position: absolute; bottom: -40px; left: -1px; z-index: 101; padding: 10px 25px; width: 100%; width: calc(100% + 2px); border-bottom: 0; background-color: #f6f6f6; color: #333; font-size: inherit; } .single.options-hidden .selectator_input { opacity: 0; position: absolute; left: -10000px; } .single.options-visible .selectator_input { opacity: 1; } .disable_search .selectator_input { opacity: 0; padding: 0 1px 1px 0 !important; } /* options holder */ .selectator_options { margin: 0; padding: 0; border: 1px solid #7f9db9; border-radius: 0 0 3px 3px; font-family: sans-serif; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; z-index: 101; background-color: #fff; overflow-y: scroll; max-height: 250px; list-style: none; left: -1px; right: -1px; } .single .selectator_options { padding-top: 0; border-top: 0; } .disable_search .selectator_options { border-top: 1px solid #7f9db9; } .single.disable_search .selectator_options { padding-top: 0; } .selectator_element.options-hidden .selectator_options { display: none; } /* option item group header */ .selectator_group { padding: 5px; font-weight: bold; } /* option item */ .selectator_option { padding: 5px; cursor: pointer; color: #000; } .selectator_option:before, .selectator_option:after { content: ""; display: table; } .selectator_option:after { clear: both; } .selectator_option.active { background-color: #39f; color: #fff; } .selectator_group_option { padding: 5px 5px 5px 20px; } /* option item - left */ .selectator_option_left { float: left; } .selectator_option_left img { height: 30px; } /* option item - title */ .selectator_option_title { margin-left: 35px; } /* option item - subtitle */ .selectator_option_subtitle { font-size: 75%; color: #888; margin-left: 35px; } /* option item - right */ .selectator_option_right { float: right; width: 30px; background-color: #ccc; font-size: 15px; color: #fff; text-align: center; border-radius: 3px; padding: 6px; }