In this short article I have explained how to change the background color style of TextBox on focus i.e. Highlight TextBox on focus and set it back to default on blur
There is absolutely no need of using jQuery, JavaScript or ASP.Net scripts for this purpose as the solution provided explains how to use pure CSS styles to change the background color style of TextBox on focus.
Since CSS is involved we can easily Highlight TextBox by change its Border style or color too instead of changing the Background color style.
Advantage of using CSS is that it will work for all technologies i.e. ASP.Net, HTML, PHP, JSP, etc. without writing a single line of jQuery or JavaScript and also is cross browser compatible.
Still if you still prefer jQuery Solution, please refer
Below is the CSS styles that you need to place either on the page Head section using style tags or in your external CSS Style Sheet class file.
input[type=text], textarea
{
border: 1px solid #ccc;
}
input[type=text]:focus, textarea:focus
{
background-color: #FFBFFF;
border: 1px solid #ccc;
}
Explanation:
The CSS styles input[type=text]and textarea are CSS selectors for TextBox and Multiline TextBox i.e. TextArea. You will notice above that there are two sets of CSS selectors for TextBox and Multiline TextBox, one default while the other one is applied when the TextBox or Multiline TextBox gets focus.
Thus when the TextBox or the Multiline TextBox anywhere on the page gets focus its background color changes to light pink and again gets back to normal when focus is lost.
Note: If you place the above CSS Classes in style sheet or in Master Page then it will be automatically applied to all TextBoxes and Multiline TextBoxes on pages that reference the CSS class file or the Master Page.
Change Background Color of HTML TextBox and TextArea
Below is an HTML Page with a TextBox and TextArea for which we need to change the background color on focus and again set back to normal on blur.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input[type=text], textarea
{
border: 1px solid #ccc;
}
input[type=text]:focus, textarea:focus
{
background-color: #FFBFFF;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id="form1">
HTML<br />
<br />
<input type="text"/><br />
<br />
<textarea rows="5" cols="5"></textarea>
</form>
</body>
</html>
Change Background Color of ASP.Net TextBox and ASP.Net Multiline TextBox
Below is an ASP.Net Page with a TextBox and Multiline TextBox for which we need to change the background color on focus and again set back to normal on blur.
As you can see yourself, there’s no difference except that we are using ASP.Net controls here.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input[type=text], textarea
{
border: 1px solid #ccc;
}
input[type=text]:focus, textarea:focus
{
background-color: #FFBFFF;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
ASP.Net<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox><br />
<br />
<br />
</form>
</body>
</html>
![Change TextBox TextArea Multiline TextBox background color jQuery, CSS JavaScript ASP.Net]()
![Change TextBox TextArea Multiline TextBox background color jQuery, CSS JavaScript ASP.Net]()
Demo
Downloads
