# منتقي العلامات: بحاجة للمساعدة في CSS مع لون خلفية العلامة / لون خلفية عند المرور

**URL:** <https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314>\
**Category:** Support\
**Created:** [9 أكتوبر 2016، 10:49م UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314 "2016-10-09T22:49:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)\
**Post date:** [9 أكتوبر 2016، 10:49م UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314/1 "2016-10-09T22:49:11Z")

</div>

Hi everyone,

_Please move this post if it’s not in the correct category; didn’t see one specific to CSS help, so I just stuck it here._

I’m having trouble with finding the CSS related to the hover background of the tag selector and the actual tag background colors, too. Right now, the background color is #ffffff and so is the text, so it’s impossible to see what the tag is.

 ![](https://global.discourse-cdn.com/meta/original/3X/b/2/b202d9ca0a1b0e98413a28b5f1771ad47072ef69.png)

Additionally, the background hover is this strange green color that I’ve never set anywhere else, and trying to track down the CSS for it has been a nightmare. I always think I’m going down the right path but nothing actually changes it.

I’m very new to CSS, so any pointers in how I can update this would be great (with the priority being the tag background colors so they’re legible). Thanks!

---

<div class="post-metadata">

**Author:** ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)\
**Post date:** [9 أكتوبر 2016، 11:07م UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314/2 "2016-10-09T23:07:24Z")

</div>

I think this is the different class you’ll need :

```
.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
     background-color: transparent !important;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple {
     background-color: transparent !important;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
    background-color: transparent !important;
}

```

The green line :

```
.select2-results .select2-highlighted {
    background: #8A8A5D;
    color: #d9d9d9;
}

```

Discourse uses some colors based on the theme configuration that you make to be compatible with light or dark theme. Here is the example with this class

```
.select2-results .select2-highlighted {
    background: dark-light-diff($highlight, $secondary, 50%, -80%);
    color: $primary;
}

```

---

<div class="post-metadata">

**Author:** ![LilTrashPanda](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/liltrashpanda/32/62053_2.png) [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)\
**Post date:** [9 أكتوبر 2016، 11:21م UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314/3 "2016-10-09T23:21:53Z")

</div>

Perfect!

That got me most of the way there, and then I was able to figure out the rest. In case others have the same trouble, here’s my CSS I used:

_To give my tags slightly rounded corners and a drop shadow:_

```
.discourse-tag.box {
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

```

_This updated the hover color behind the tags:_

```
.select2-results .select2-highlighted {
    background: #595959;
    color: #595959;}

```

_After selecting a tag, this helped to give it a “floating” feeling in the tag selection box:_

```
.select2-container-multi .select2-choices .select2-search-choice.discourse-tag-select2 {
    background-color: #222;}

```

_This updated the background color of the tags (turned them blue):_

```
.discourse-tag.box {
    background-color: #0f82af;
    color: #fff}

```

**The Final Result:**

 ![](https://global.discourse-cdn.com/meta/original/3X/8/7/8794d85633386345673a3a5ba655514edd33c74c.png)

---

<div class="post-metadata">

**Author:** ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)\
**Post date:** [10 أكتوبر 2016، 12:43ص UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314/4 "2016-10-10T00:43:50Z")

</div>

Nice, glad I could help. It looks great !

On my forum I used a `text-transform: uppercase;` on the tags. I think it looks better all caps.

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [8 يونيو 2024، 12:45م UTC](https://meta.discourse.org/t/tag-picker-css-help-needed-with-tag-background-hover-background-color/51314/5 "2024-06-08T12:45:13Z")

</div>

تم إغلاق هذا الموضوع تلقائيًا بعد 2798 يومًا. لم يعد يُسمح بالردود الجديدة.