CODEWITHSUNDEEP
javascriptasp.netcss
coder
coder

Reputation: 13248

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 remove 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>

Upvotes: 0

Views: 2538

Answers (1)

Rusty Fausak
Rusty Fausak

Reputation: 7525

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

Upvotes: 1

Related Questions