Apply style to some but not all.

[SSirica]

I have a page with a few Comboboxes.  Not all of them are required, but the ones that are I would like to make the back ground color yellow.  I see that there is a property for BackColor and InputCssClass.  That all well and good, but the input area is rendered within a <span class="rcbInner">.  If I only change the BackColor and InputCssClass to be yellow the <span> around it is still white.  So what I would like to to do is change the rcbInner only for certain controls.  I have a radcombobox named cbCC_Month so I thought this might work:

        #cbCC_Month rcbInner {
            background-color: yellow !important;
        }

It did not.  

[SSirica]

Never mind.  It should have been 

#cbCC_Month .rcbInner {
            background-color: yellow !important;
        }

 

I was missing the period in front of the rcbInner.  Nothing to see here move on lol

[Peter Milchev]

Hi,

Indeed adding the . to rcbInner fixes the issue. For clarity and convenience for the community, I would share some more resources on the topic and the usage of a different approach. 

The dot is the selector for a class name while the # is the selector for an ID. Here you can check all the supported selectors and ou can use them in CSS styles as well as CSS selectors when working with JavaScript/jQuery:

• https://www.w3schools.com/cssref/css_selectors.asp 

Each selector has its specificity, which is basically its "strength" and priority. The specificity is used to decide which rule should be used when two or more rules apply for the same element.

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

As you can see, the !important has a very high specificity and works in most cases, but it is a pain to override it if needed. That is why it is recommended to use a few selectors to gain specificity in order to override all other styles. E.g. if you need to override a style applied from .RadComboBox .rcbInner, you can add "html body " in front of it => "html body .RadComboBox.rcbInner".

Another thing you might consider about the approach you have is to use a custom CSS class instead of a hardcoded ID. For example, if you add "yellow-background" as a CssClass of the RadComboBox, you can reuse it across many combo boxes instead of defining the ID of each and every combobox you want to make yellow.

<style>
    .RadComboBox.yellow-background .rcbInner{
        background-color: yellow;
    }
</style>
<telerik:RadComboBox ID="RadComboBox1" CssClass="yellow-background"  runat="server" RenderMode="Lightweight" ...>

Regards,
Peter Milchev
Progress Telerik