Apply style to some but not all.

2 Answers 22 Views
ComboBox
SSirica
Top achievements
Rank 1
Veteran
Iron
SSirica asked on 02 Sep 2021, 03:19 PM

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.  

2 Answers, 1 is accepted

Sort by
0
Accepted
SSirica
Top achievements
Rank 1
Veteran
Iron
answered on 02 Sep 2021, 03:25 PM

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

0
Peter Milchev
Telerik team
answered on 03 Sep 2021, 12:22 PM

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:

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.

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ComboBox
Asked by
SSirica
Top achievements
Rank 1
Veteran
Iron
Answers by
SSirica
Top achievements
Rank 1
Veteran
Iron
Peter Milchev
Telerik team
Share this question
or