.fs-wrap { position: absolute; left: 0; top: 0; display: none; width: 200px; margin: 3px; z-index: 999; font-size: 12px; line-height: 1 } .fs-wrap.active{ display: block; } .fs-wrap .close{ display: flex; justify-content: flex-end; position: relative; border: 1px solid #ccc; cursor: default; color: #555; z-index: 9999; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .fs-wrap .close i{ font-style: normal; transform: rotate(45deg); font-size: 28px; cursor: pointer; } .fs-label-wrap { display: none; position: relative; border: 1px solid #ccc; cursor: default; color: #555; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) } .fs-label-wrap, .fs-dropdown { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .fs-label-wrap .fs-label { padding: 4px 22px 4px 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer } .fs-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #000; position: absolute; top: 0; right: 4px; bottom: 0; margin: auto; cursor: pointer } .fs-dropdown { position: absolute; top: 28px; background-color: #fff; border: 1px solid #ccc; width: 100%; z-index: 1000; border-radius: 4px } .fs-dropdown .fs-options { max-height: 200px; overflow: auto } .fs-search input { width: 90%; padding: 2px 4px; border: 1px solid #ddd; } .fs-selectAll { float: right; cursor: pointer; margin-top: 4px; height: auto } .fs-selectAll.selected { float: right; cursor: pointer; margin-top: 4px; height: auto; color: green } .fs-selectAll:hover { background-color: #eee } .fs-option, .fs-search, .fs-optgroup-label { padding: 6px 8px; border-bottom: 1px solid #eee; cursor: default } .fs-option { cursor: pointer } .fs-option.hl { background-color: #f5f5f5 } .fs-wrap.multiple .fs-option { position: relative; padding-left: 30px } .fs-wrap.multiple .fs-checkbox { position: absolute; display: block; width: 30px; top: 7px; left: 9px; bottom: 0 } .fs-wrap.multiple .fs-option .fs-checkbox i { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 14px; height: 14px; border: 1px solid #aeaeae; border-radius: 4px; background-color: #fff } .fs-wrap.multiple .fs-option.selected .fs-checkbox i { background-color: #11a911; border-color: transparent; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: center } .fs-wrap .fs-option:hover { background: #d1f3e5; border-radius: 4px; margin-left: 0; margin-right: 2px } .fs-optgroup-label { font-weight: 700 } /*.hidden {*/ /* display: none*/ /*}*/ .fs-options::-webkit-scrollbar { width: 6px } .fs-options::-webkit-scrollbar-track { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .1) } .fs-options::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .2); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em }