search

wenzhixin / multiple-select

A jQuery plugin to select multiple elements with checkboxes :)
http://multiple-select.wenzhixin.net.cn
MIT License
1.91k stars 652 forks source link

API for change default arrow-icon ? #541

Closed Charles808 closed 4 years ago

Charles808 commented 4 years ago

Is there a way to change the default icon arrow for the select tag (opened/closed) separately?

wenzhixin commented 4 years ago

You can overwrite the CSS style, for example, http://multiple-select-live.wenzhixin.net.cn/code/wenzhixin/2497.

Charles808 commented 4 years ago

Hi, Thanks for the answer

I saw your example, but it is just changing the style of the default icon only. What if I need to change the icon entirely ? Like not using arrow but square icon or maybe fontawesome icon.

I tried to use :

background: url(...)
appearance: none

Which is the usual way to change icon in the normal "select" tag. But it is not taking any effect.

Is this currently possible for now ?

Charles808 commented 4 years ago

I already got it

The solution is to make the border become none and add another background as the icon. The rest are only adjusting position of the icon. Here is the example code:

.your-class .ms-choice>div.icon-caret {
    position: absolute;
    height: 22px;
    width: 22px;
    top: 11px;
    right: 9px;
    border: none;
    background: transparent url(../../img/yourImage.png) no-repeat 0px 0px/22px 22px;
}

Hope it helps.

wenzhixin commented 4 years ago

Great!