title: Set a different color for each tag
body: <p>I have a select2 where the users can select tags from a list or add new tags. WHen the user insert a new tag, I record it on a database. The user can, from other screen edit this tag and  associate it to a color. So my "tag" objects are like this:</p>
  
  <pre><code>{id:1, text:"cool tag", color:"#336699"}
  </code></pre>
  
  <p>What I would like to do is to show the tags with its colors inside the select2. I tried to do</p>
  
  <pre><code>formatSelection: function (tag) {
      return '&lt;div style="background-color:'+tag.color+'"&gt;' + tag.text + '&lt;/div&gt;';
  },
  </code></pre>
  
  <p>but this does not change the background color of the div that holds the tag itself. </p>
  
  <p>I also know I can use <code>formatSelectionCssClass</code> to add a css class to each item but in this case since the colors are user created, I do not have css classes with them (although if its the only way possible, is what I will do, dinamically generate a css file).</p>
  
  <p>(PS.: <a href="https://stackoverflow.com/questions/14339828/how-to-change-the-css-of-color-of-select2-tags">This</a> looks like a solution but I was looking for something more elegant)</p>