# How to disable css for only one select option

**URL:** <https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143>\
**Category:** HTML & CSS\
**Created:** [February 16, 2021, 11:44am UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143 "2021-02-16T11:44:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [February 16, 2021, 11:44am UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/1 "2021-02-16T11:44:16Z")

</div>

Hello,

Below is the css code I use for all pages.  
But I want to disable it in text editor

```
option, optgroup
{
	font-weight: bold;
	font-size: 11px;
	font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	color: #DEE0E2;
	background: #10375D;
}

```

Such a problem happens in the text editor

 ![Ekran%20g%C3%B6r%C3%BCnt%C3%BCs%C3%BC%202021-02-16%20143316](https://www.phphelp.com/uploads/default/original/2X/9/95596686326c95e980e2c5a68d4937ea99bf043c.jpeg)

Text editor js code

```
}).append($('<label/>',{ for:"tblAlign"+idExtn, text:"Hızala"}
)).append($('<select/>',{ id:"tblAlign"+idExtn, class:"form-control form-control-width select-icin"}
).append($('<option/>',{ text:"Seç", value:""}
)).append($('<option/>',{ text:"Sol", value:"left"}
)).append($('<option/>',{ text:"Orta", value:"center"}
)).append($('<option/>',{ text:"Sağ",	value:"right"}))

```

text color and background color just want to disable in editor

Thank you

---

<div class="post-metadata">

**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\
**Post date:** [February 16, 2021, 9:44pm UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/2 "2021-02-16T21:44:19Z")

</div>

Not very sure what you mean, but, to create a different color in a select, just use classes as they work good.

css red: color red; blue: color blue;  
\< option class=“red”\>something\< /options\>  
\< option class=“blue”\>something else\< /options\>

Is that what you are asking?

---

<div class="post-metadata">

**Author:** ![skawid](https://www.phphelp.com/letter_avatar_proxy/v4/letter/s/bbe5ce/32.png) [@skawid](https://www.phphelp.com/u/skawid)\
**Post date:** [February 17, 2021, 9:26am UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/3 "2021-02-17T09:26:42Z")

</div>

There are a couple of ways to approach this.

One way is to add another style to target the select group in your editor specifically. You can do this by finding the class name of your text editor container element, then doing something like the below. For example, if your text editor lives in a div element with the class `text-editor`:

```css
.text-editor option, .text-editor optgroup {
    font-weight: initial;
    font-size: initial;
    font-family: initial;
    color: initial;
    background: initial;
}

```

The above will work fine if you only have one third party component you want to leave alone, but gets difficult when you add more components. If this is the case, you should scope your own components so that your css is only applied to them. This means you add a class to your component container:

```auto
<div clas="adems-component">
    <select>
        ... options...
    </select>
</div>

```

then qualify your css appropriately:

```css
.adems-component option, .adems-component optgroup
{
	font-weight: bold;
	font-size: 11px;
	font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	color: #DEE0E2;
	background: #10375D;
}

```

---

<div class="post-metadata">

**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\
**Post date:** [February 17, 2021, 2:32pm UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/4 "2021-02-17T14:32:27Z")

</div>

Shawid, that is nice, but, it does not allow him to change the drop-down option to another color.  
Since he creates the option himself, he can just change the background-color in the code itself for active item. Just my opinion…

---

<div class="post-metadata">

**Author:** ![skawid](https://www.phphelp.com/letter_avatar_proxy/v4/letter/s/bbe5ce/32.png) [@skawid](https://www.phphelp.com/u/skawid)\
**Post date:** [February 17, 2021, 3:29pm UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/5 "2021-02-17T15:29:56Z")

</div>

That’s fair Alex, I should have checked that. @Adem, do you have control of the text editor code or does that belong to someone else?

---

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [February 18, 2021, 8:37am UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/6 "2021-02-18T08:37:42Z")

</div>

I am using the above css code for all fields in the administration panel of my website. There is no problem.  
**Note:** css file in local folder

 ![Ekran%20g%C3%B6r%C3%BCnt%C3%BCs%C3%BC%202021-02-18%20112955](https://www.phphelp.com/uploads/default/original/2X/4/4020dbe04124a0bcd02e4d258e28b672e9e41d57.jpeg)  
The problem is,  
I want to disable the select option background color, text color and mouse over for text editor only.  
 ![Ekran%20g%C3%B6r%C3%BCnt%C3%BCs%C3%BC%202021-02-18%20112248](https://www.phphelp.com/uploads/default/original/2X/1/1c99668cf5df1815cfb78450f9b4d575d0c61d61.jpeg)  
This text editor’s table insert window

Select option css code in main css is not like this

> input, select, textarea, option, optgroup  
> {  
> font: 11px verdana, geneva, lucida, ‘lucida grande’, arial, helvetica, sans-serif;  
> }  
> optgroup  
> {  
> font-size: 11px;  
> font-style: italic;  
> font-weight: bold;  
> }
> 
> /\* Most form elements appear using this definition _/  
> textarea, .bginput, input.col-c, input.col-i, input.col-g  
> {  
> font: bold 11px tahoma, verdana, geneva, lucida, ‘lucida grande’, arial, helvetica, sans-serif;  
> color: #DEE0E2;  
> background: #10375D;  
> border: solid 1px #DEE0E2;  
> scrollbar-base-color: #086693;  
> scrollbar-arrow-color: #EEF0F2;  
> scrollbar-track-color: #10375D;  
> }  
> /_ slight changes for option and optgroup to keep latest versions of Gecko happy \*/  
> option, optgroup  
> {  
> font-weight: bold;  
> font-size: 11px;  
> font-family: tahoma, verdana, geneva, lucida, ‘lucida grande’, arial, helvetica, sans-serif;  
> color: #DEE0E2;  
> background: #10375D;  
> }

Maybe it would be more correct with the name Class

```
.option .optgroup
{
	font-weight: bold;
	font-size: 11px;
	font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	color: #DEE0E2;
	background: #10375D;
}

```

However, it is necessary to rearrange all select options.  
I’m looking for an easier and shorter way instead

---

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [February 18, 2021, 10:06am UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/7 "2021-02-18T10:06:29Z")

</div>

I used this “bginput” class for all inputs  
AND  
I disabled the background color and text color here

```auto
option, optgroup
{
	font-weight: bold;
	font-size: 11px;
	font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	/* color: #DEE0E2; */
	/* background: #10375D; */
}

```

 ![Ekran%20g%C3%B6r%C3%BCnt%C3%BCs%C3%BC%202021-02-18%20130801](https://www.phphelp.com/uploads/default/original/2X/0/02ba6459e73f9a4fdd2f93cace3d2d2d1bb49ed2.jpeg)  
There is no problem for now,  
Select option background color and text color in text editor are no longer available  
Ok for now

Thank you for your help

---

<div class="post-metadata">

**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\
**Post date:** [February 18, 2021, 1:55pm UTC](https://www.phphelp.com/t/how-to-disable-css-for-only-one-select-option/33143/8 "2021-02-18T13:55:08Z")

</div>

Glad you solved it. See you in your next post…