### Author:  [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [2017年八月9日 22:24 UTC](https://meta.discourse.org/t/feature-request-tag-styling-addition/67744/1 "2017-08-09T22:24:59Z")
Being able to hide tags is a useful feature in many situations. Use cases have been discussed before, for example [here](https://meta.discourse.org/t/hide-tags-in-filter-list-new-site-setting/51715) and [here](https://meta.discourse.org/t/hide-staff-tags-from-non-staff-users/44025).
This feature is implemented through a `tag-nameOfTheTag` class added to tags `` link is hidden but the rest remains and is displayed.
To solve the problem, I suggest the `tag-nameOfTheTag` class to be added to the top ``, in both the input box and the list box:
```html
```
---
### Author:  [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [2017年八月9日 23:08 UTC](https://meta.discourse.org/t/feature-request-tag-styling-addition/67744/2 "2017-08-09T23:08:22Z")
My gut says CSS shouldn’t be used to visually hide valid elements in a form. I am sure I could find docs to support that.
What is your use case? The two you linked two were very different, one was a code change to the tag system, and the other was a CSS solve to a filtering issue. I can’t figure out what your use is, that isn’t solved by staff-only tags.
---
### Author:  [@jack2](https://meta.discourse.org/u/jack2)
#### Post date: [2017年八月10日 12:41 UTC](https://meta.discourse.org/t/feature-request-tag-styling-addition/67744/3 "2017-08-10T12:41:17Z")
Thanks @maiki. I will come back later with a detailed answer.
In the meantime, for those landing here in the future, here is a way to implement the feature in a plugin initializer (EDITED 08-18-2017):
```plaintext
import TagChooser from 'discourse/components/tag-chooser'
// Discourse extension to add tag-myTagName class to elements
// See discussion here:
// https://meta.discourse.org/t/feature-request-tag-styling-addition/67744/3?u=jack2
//
// Implementation based on:
// https://github.com/discourse/discourse/blob/b5cc6851cf28bbaa775a9f8f9ee330ea9cd9cef8/app/assets/javascripts/discourse/components/tag-chooser.js.es6#L56
// https://github.com/select2/select2/issues/2830#issuecomment-75008648
// https://stackoverflow.com/a/25069704/3567351
// https://github.com/discourse/discourse/blob/5dbd6a304bed5400be481d71061d3e3ebb4d6785/vendor/assets/javascripts/select2.js#L1115
TagChooser.reopen({
didInsertElement() {
// Call the parent function, in order to actually create the 'select2'
// component
this._super()
// Get the 'select2' data
const data = this.$().data('select2')
// Add the tag-xxxx class to selection items
// At this stage the selection has already been rendered, so we have to
// actually change the DOM
data.selection.find('a.discourse-tag').each((i, el) => {
const tagClass = $(el).attr('class').match(/(^|\W)tag-\S+/)
$(el).closest('li').addClass(tagClass[0])
})
// Add the tag-xxxx class to dropdown items
// At this stage the dropdown has not been rendered yet, so we can
// use the 'select2' API
const fn = data.opts.formatResultCssClass || (() => {})
data.opts.formatResultCssClass = (data, container) =>
fn(data, container) + ' tag-' + data.id
}
})
```
As mentioned by @maiki, notice that providing a CSS rule with `display:none` will only hide the tag, not disable it. A user can still type the name of the hidden tag and have it saved in the topic, even though the tag is never displayed.