MR.Don't know MR.Don't know - 8 months ago 52
CSS Question

Search token color

I am using


I am trying to get tokens of different colors, and to add the
to each token.

I am using this bootstrap search field:

<input type="text" id="exampleInlineTags" class="token-field" name="search" value="red, green" placeholder="enter text" />

and boostrap tokeninput See the source for bootstrap-tokenfield
, everything is working fine, now I need to set predefined colors on token input, just like this: Example of what I am trying to achieve

EDIT : Corrected the grammar of the question as OP mentioned having a bad level of English


If you need a specific id and color assigned based on the value of the token then you could listen for the tokenfield:createtoken event.

However if you need to just cycle colors for the tokens I suggest you use the CSS to achieve your goal. For cycling a pattern of 10 colors you could write:

.token:nth-of-type(10n+1){ ... }

.token:nth-of-type(10n+2){ ... }


.token:nth-of-type(10n+10){ ... }