Checkbox border

1 Answer 53 Views
Checkbox
Doug
Top achievements
Rank 1
Iron
Iron
Veteran
Doug asked on 11 Oct 2024, 06:24 PM

Whenever I add a TelerkiCheckBox to a page/component the testers complain that they can't see the border of the checkbox so I'm constantly adding the below css to my razor files:

<style>
    .k-checkbox {
        /* Make the border a little darker than the default */
        border-color: rgba(0, 0, 0, 0.4);
    }
</style>

If I add this to my app.css it doesn't get applied.

Is there any way to apply this at a global level?

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 15 Oct 2024, 08:56 AM | edited on 16 Oct 2024, 05:29 AM

Hi Doug,

In this case there are two concepts, which come into play:

Your CSS rule has the same specificity as ours - 1 CSS class (.k-checkbox). So, the precedence depends only on the cascade. <style> tags take precedence over <link> tags. If you move your rule in a CSS file, then the order of the two <link> tags starts to matter.

So the solution is to do one or both of the following:

In such cases it is important to work with the browser's developer console in order to:

  • See our theme rules.
  • Come up with optimal combinator for the custom CSS rule.
  • Verify or troubleshoot the outcome.

Regards,
Dimo
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.

Doug
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 15 Oct 2024, 03:15 PM

Well I do admit to not being a css expert (one of the many reasons to use the Telerik controls). Thank you for educating me.
Tags
Checkbox
Asked by
Doug
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Dimo
Telerik team
Share this question
or