How to disable css for only one select option

[Adem]

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

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

[ErnieAlex]

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?

[skawid]

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:

.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:

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

then qualify your css appropriately:

.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;
}

[ErnieAlex]

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…

[skawid]

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?

[Adem]

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

The problem is,
I want to disable the select option background color, text color and mouse over for text editor only.

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

[Adem]

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

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

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

[ErnieAlex]

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