CSS Tricks: Change background and border color of asp.net textbox on focus - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

CSS Tricks: Change background and border color of asp.net textbox on focus

In this article I am going to explain how to change background and border of asp.net textbox on focus using CSS


Implementation:
Add the below given style before closing head section:

<style>
.textbox {
            padding: 4px;
            color: #333333;
            font-size: 14px;
            background-color: #ffffff;
        }
            .textbox:focus {
                border: 2px solid #4CAF50;
                background-color#D9D9D9;
        }
   </style>

Complete HML Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
.textbox {
            padding: 4px;
            color: #333333;
            font-size: 14px;
            background-color: #ffffff;
        }

            .textbox:focus {
                border: 2px solid #4CAF50;
                background-color#D9D9D9;
        }
   </style>
</head>
<body>
<form id="form1" runat="server">
 <fieldset style="width:45%">
    <legend>CHANGE BACKGROUND AND BORDER COLOR OF TEXTBOX USING CSS</legend>
    <table>
    <tr>
    <td>Username</td> <td><asp:TextBox ID="txtusername" runat="server" ToolTip="Enter Username" CssClass="textbox"></asp:TextBox></td>
    </tr>
    <tr><td></td><td></td></tr>
     <tr>
    <td>Password</td> <td><asp:TextBox ID="txtpwd" TextMode="Password" runat="server" ToolTip="Enter password" CssClass="textbox"></asp:TextBox></td>
    </tr>
    </table>
    </fieldset>
    </form>
</body>
</html>

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon