ASPx control focus not working

Question

I want to apply an effect on focus upon a <dx:ASPxTextBox control> . Here is what I tried :

<dx:ASPxTextBox ID="tb_name" runat="server" Focused-CssClass="txtBox"></dx:ASPxTextBox>

And here is my focused class css :

<style>
    .txtBox:focus {
        border-color : red;
        transition : 0.5s linear;
    }
</style>

When I try it, it seems the focus state of my css isn't applied when I click on my textBox. I tried the exact same with a simple <asp:TextBox> and it works well, so my css isn't involved.

How can I perform this with a DevelopperExpress control <dx:ASPxTextBox> ?

Answer 1

Thanks to @Darren, the solution is to separate the :focus state in a single css class. Here is the step to do :

<dx:ASPxTextBox ID="tb_name" runat=server" CssClass="txtBox">
    <FocusedStyle CssClass="txtBoxFocused"></FocusedStyle>
</dx:ASPxTextBox>

The focus state isn't shared with the "basic" state. And here is the css :

<style>
    .txtBox {
        border-color : black;
        border-width : 1px;
        transition : 0.5s linear;
    }

    .txtBoxFocused {
        border-color : red;
        border-width : 1px;
        transition : 0.5s linear;
    }
</style>