Databases
StackOverflow2013
Postsdbo
POHow to change the css of color of select2 tags?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change the css of color of select2 tags?
    text
    copied!<p>I just started using project for showing multiple tags from a select box and it works great, thanks for the library.</p> <p>I just need to modify the color or css of the tags shown in multi-value select-boxes. Right now the color of the tag is shown as grey and I would like to change that to some other color according to the type of the tag. Or at least is there a way to change the default color? </p> <p>Also is it possible to change the css class of tags? There is an option such as <code>formatResultCssClass</code> but when I tried to add css classes through that property nothing changed, I would appreciate if someone can show an example how to do this?</p> <p>Edit: Workaround for solving the problem: Add a new property to the select2.defaults for representing classes of selected objects.</p> <pre><code>$.fn.select2.defaults = { ... selectedTagClass: "", ... } addSelectedChoice: function (data) { var choice=$( "&lt;li class='select2-search-choice " + this.opts.selectedTagClass + "'&gt;" + " &lt;div&gt;&lt;a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'&gt;&lt;i class='icon-remove icon-white'/&gt;&lt;/a&gt;&lt;/div&gt;" + "&lt;/li&gt;"), id = this.id(data), val = this.getVal(), formatted; ... </code></pre> <p>And initialize select2 using this new property:</p> <pre><code>$(".#select2Input").select2({placeholder: "Please Select Country", selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements formatNoMatches: function () { return "There isn't any country similar to entered query"; } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload