I am building a reusable web block to be used throughout my company's applications. I want the text in the dropdown inside the web block to be bolded, and I would like to apply other styles as well. 

I have tried overriding the CSS at the block level, but none of the changes I make in the CSS editor are applied to the dropdown.

I have tried adding the following, for testing purposes:

SyntaxEditor Code Snippet

[data-dropdown] > div.dropdown-display,
[data-dropdown] > select.dropdown-display {
    font-size: 32px;
}

And no changes are made. Any ideas what I am doing wrong?

Thank you!

Solution

Hi Landon,


When you go the page and do an inspect element what do you see? 


If you want to overwrite the page's CSS, inside the Webblock, you can add "!important" to your CSS.

[data-dropdown] > div.dropdown-display,
[data-dropdown] > select.dropdown-display {
    font-size: 32px !important;
}


Also check if you are using the selectors in a correct way. I suggest you to do inspect element, see the selectors that are giving the characteristics that you see and try to manipulate them.

Everything that you define in a webblock (CSS)  will be overwritten by the Page's CSS. Unless you use the !Important 



Best regards,


João Delgado


Solution

Thank you!