Saturday, February 27, 2016

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>

No comments:

Post a Comment