Как изменить значок каретки в selectize.js?

Я хочу, чтобы изменить значок каретку в selectize.js быть похожим (glyphicon меню) Bootstrap, как показано на рисунке ниже:Как изменить значок каретки в selectize.js?

enter image description here

Я использую (selectize.bootstrap3.css) и попытался играть с этим css-файлом, но не повезло.

источник

2015-06-08 Ala

Вы можете создать демо с соответствующим кодом? –

Я понял это. Я изменил следующие классы CSS внутри файла (selectize.bootstrap3.css), которые делают значок:

.selectize-control.single .selectize-input:after { 
     content: '\e259'; /*This will draw the icon*/ 
     font-family: "Glyphicons Halflings"; 
     line-height: 2; 
     display: block; 
     position: absolute; 
     top: -5px; 
     right: 0; 
     background-color: white; 
     padding-right: 2px; 
      } 

    .selectize-control.single .selectize-input.dropdown-active:after { 
     content: '\e260'; 
     font-family: "Glyphicons Halflings"; 
     background-color: white; 
     padding-right: 2px; 

    }

источник

2015-06-08 10:57:18 Ala

Когда я смотрю документы библиотеки selectize.js, я вижу, что каретка сделана чистой с помощью CSS с помощью селектора after.

Также в документах плагина я не вижу никакой опции, чтобы установить еще один css class или icon или html tag для управления кареткой.

Что вы могли бы на это:

Используйте стиль, который предоставляется владельцем и оставить его таким образом
Попросите владельца или создать билет на GitHub, чтобы задать это требование
поиска другого плагина, где это возможно изменить каретку

другой библиотека, которую можно использовать, если вы используете Twitter Bootstrap, является Bootstrap select

источник

2015-06-08 09:44:21 Mivaweb

Я бы предпочел «Chosen.js» вместо стиля select. Вы можете легко изменить значок каретки внутри css без проблем.

Избранная документация:

http://harvesthq.github.io/chosen/

источник

2015-06-08 09:59:27

значка вы хотите использовать стандартный для "Складных панелей". Стандартный значок для выпадающего списка - это тот, который вы хотите удалить.

Даже если вы хотите, чтобы удалить попробовать это, он будет работать

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    #dropdown { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 2px 30px 2px 2px; 
    border: none; 
    background: transparent 
url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center; 
    } 
</style> 
</head> 
<body> 
<form> 
<fieldset> 
    <select id="dropdown" name="dropdown"> 
    <option value="1" selected="selected">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    </select> 
    </fieldset> 
    </form> 
    </body> 
    </html>

Вот результат:

Icon is as per your requirement

После нажатия на иконку:

after click

источник

2015-06-08 10:16:12 Sharad

Путь с использованием чистого CSS, как и в оригинальных стилей. Не уверен, если это оптимально, но в любом случае, может быть, it'l быть удобно для кого-то :)

.selectize-control.single .selectize-input:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    top: 37%; 
 
    right: 15px; 
 
    margin-top: -3px; 
 
    width: 5px; 
 
    height: 5px; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    border-color: #808080 #808080 transparent transparent; 
 
    transform: rotate(135deg); 
 
} 
 

 
.selectize-control.single .selectize-input.dropdown-active:after { 
 
    top: 63%; 
 
    border-width: 3px; 
 
    border-color: transparent transparent #808080 #808080; 
 
}

источник

2016-09-14 22:08:23

.selectize-control.single .selectize-input:after { 
    width: 10px; 
    height: 10px; 
    transform: rotate(45deg); 
    border: 2px solid rgba(0,0,0,.2); 
    border-width: 0 2px 2px 0; 
    margin-top: -6px; 
} 
.selectize-control.single .selectize-input.dropdown-active:after { 
    border: 2px solid rgba(0,0,0,.2); 
    border-width: 2px 0 0 2px; 
    margin-top: -2px; 
} 
.selectize-input { 
    white-space: nowrap; 
}

источник

2017-04-21 15:09:19 Denis

Как изменить значок каретки в selectize.js?

ответ

Смежные вопросы