Styling Focus Border for Radzen Input Components - Excluding Search Fields

Radzen.Blazor Components
1

Hello everyone,

I'm trying to apply a consistent orange focus border to my Radzen input components (Datepickers, Numerics, normal Inputtexts, and Dropdowns). I've achieved this with the following CSS:

/* Consistent CSS-Design for Borders in Radzen-Input-Components */
.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, /* for dropdowns */
.rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, /* without this line datepickers, numerics & searchfields (also in dropdowns) wont be orange... but textfields are still orange */
.rz-textbox:not(:disabled):not(.rz-state-disabled):focus { /* for normal textfields */
    box-shadow: inset 0 0 0 1px var(--nerd-orange) !important; /* without this, the shadow stays default */
    border: 1px solid var(--nerd-orange) !important; /* without this, the border stays default (very thin) */
    border-radius: var(--rz-border-radius) !important; /* without this numerics and searchfields have corners, the rest isn't affected */
}

However, I'm encountering an issue with Search fields. These Search fields appear both as standalone components (which I don't want to style with the orange border) and within Dropdown components. Currently, they are also getting the orange focus border, as shown in this image:

grafik
grafik522×216 2.33 KB

the same occurs for following component:
grafik

Ideally, only Datepickers, Numerics, normal Inputtexts, and the main Dropdown element should have the orange focus border. Search fields (whether standalone or within a Dropdown) should retain their default focus style.

The only way I've found to remove the orange border from the Search fields is by removing the .rz-inputtext:focus line:

.rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,

But this unfortunately also removes the orange border from my Datepickers, Numerics, and normal Inputtexts, which is not the desired outcome.

How can I modify my CSS to achieve the orange focus border on Datepickers, Numerics, normal Inputtexts, and Dropdowns, while ensuring that Search fields (standalone and within Dropdowns) retain their default focus styling?

Any help or suggestions would be greatly appreciated!

Thank you.

2

Hi @Samuel_Scherrer,

You could take advantage of the available CSS variables:

For example, you can assign your own values to these variables globally within a :root {} or within a custom CSS class, which you can then apply as needed:

<RadzenTextBox class="my-focus-style" />

<style>
    .my-focus-style {
        --rz-input-focus-shadow: inset 0 0 0 1px var(--nerd-orange);
        --rz-input-focus-border: 1px solid var(--nerd-orange);
    }
</style>

image
image1920×1183 165 KB

Use :not to exclude elements:

:root *:not(.rz-popup) {
        --rz-input-focus-shadow: inset 0 0 0 1px var(--nerd-orange);
        --rz-input-focus-border: 1px solid var(--nerd-orange);
}

image
image1164×940 55.7 KB

You can use the browser's devtools to find the variables you need to update.