In this article i will show you how you can change the background color of a textbox in asp.net using jquery.
For this you needed to create a css style. Just check the below style sheet. Add this style sheet at the header of your page.
Now on your add the jquery reference .
Now add as aspx textbox
in above code we have applied the style sheet to textbox on focus of the mouse and remove the css on blur event the moue from textbox.
Now after combing the code you page will look as shown below.
Now nun the page. Initially Your textbox will look as shown below.
And as you put your mouse inside the textbox you box will look as shown below.
For this you needed to create a css style. Just check the below style sheet. Add this style sheet at the header of your page.
<style type="text/css">
.focus {
border: 1px solid green;
background-color: yellow;
}
</style>Now on your add the jquery reference .
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
Now add as aspx textbox
<asp:TextBox ID="txtcountry" runat="server"/>
Now copy the below jquery code at the header of your page.<script type="text/javascript">
$(document).ready(function() {
$(`INPUT[type="text"]`).focus(function() {
$(this).addClass("focus");
});
$(`INPUT[type="text"]`).blur(function() {
$(this).removeClass("focus");
});
});
</script>in above code we have applied the style sheet to textbox on focus of the mouse and remove the css on blur event the moue from textbox.
Now after combing the code you page will look as shown below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change textbox background color on focus in jquery</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(`INPUT[type="text"]`).focus(function() {
$(this).addClass("focus");
});
$(`INPUT[type="text"]`).blur(function() {
$(this).removeClass("focus");
});
});
</script>
<style type="text/css">
.focus {
border: 1px solid green;
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtcountry" runat="server"/>
<asp:TextBox ID="txtcountry" runat="server"/>
</div>
</form>
</body>
</html>Now nun the page. Initially Your textbox will look as shown below.
And as you put your mouse inside the textbox you box will look as shown below.
Tags: Asp.Net , CSS/CSS3 , jQuery
No comments:
Post a Comment