TelerikCheckBox how to make the checkbox bolder?

1 Answer 100 Views

Checkbox

Deasun asked on 04 Feb 2025, 02:42 PM

On my page I have:

and I put the following at the bottom of the page:

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

The checkboxes box appears just as i want it.

But I now want that for my whole project. This is were I am having an issue my entry in the app.css seems to be ignored and I am not sure why.

App.css:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<base href="@MyNavigationManager.BaseUri" />

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

<link rel="stylesheet" href="MarginAnalysis.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="InteractiveServer" />

@* Telerik Stuff *@
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
@* Needed for the Telerik 5.0.0 icons! *@
<link href="https://blazor.cdn.telerik.com/blazor/5.0.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="app.css" />
</head>

I put the App.ccs at the end. As far as I understand it that should make it work above teleriks theme css.

What am I missing?

Thanks

Deasun.

1 Answer, 1 is accepted

Accepted

answered on 06 Feb 2025, 07:17 AM

Hello Deasun,

To ensure that your custom CSS styles in app.css override the default Telerik styles, follow these steps:

Check for CSS Specificity

Even if your CSS file is loaded last, Telerik's CSS rules might still take precedence if they are more specific. If needed, increase the specificity of your custom styles by using more specific selectors, like this:
```
.tooltip-target .k-checkbox {
    border-color: rgba(0, 0, 0, 0.4) !important;
}
```

Verify CSS Loading

Use browser developer tools to confirm that app.css is loaded correctly and that your styles are being applied. Look for any console errors that might indicate issues with loading resources.

Clear Browser Cache

Clear your browser cache to ensure the latest version of your CSS is being used, as cached versions may not reflect recent changes.

Additional Resources

For more guidance on overriding styles and understanding CSS specificity, refer to our documentation:
- https://docs.telerik.com/blazor-ui/styling-and-themes/override-theme-styles

By following these steps, your custom styles should be applied across your project. If you still face difficulties, please provide more details about your project type, .net version you are using, or a sample project of your setup for further assistance.

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