Remove default focus from textbox in asp.net using css and javascript

I have a login form where the user cicks on the "txtUsername" which is a simple text box then it is highlighted with yellow border by default but I want to re开发者_开发知识库move that.

How to do that?

As If I manually add some css styles I can change the focus elements of the textbox but it is adding to the previous border which is "yellow".So I need to remove that

Any help will be appreciated!

Here is my Css code:

     .onfocus
{
    border: thin groove #3366CC;
}
        .onblur
        {
          border:;
        }

Here is the script code:

 <script type="text/javascript">
    function Change(obj, evt) {
        if (evt.type == "focus")
            obj.className = "onfocus";
        else if (evt.type == "blur")
            obj.className = "onblur";
    }
</script>

Form Code:

  <asp:TextBox ID="txtUsername" runat="server" Style="position: absolute; top: 76px;
        left: 24px; width: 189px; height: 24px;" onfocus="Change(this, event)" onblur="Change(this, event)"
        BackColor="#FAFFBD"></asp:TextBox>

---

Try the following:

<style type="text/css">
#element:focus { border: 1px solid red; }
</style>
<input type="text" id="element" />

Here is a demo: jsFiddle demo