Home > CSS > Watermark with TextBox using CSS

Watermark with TextBox using CSS


Try this example:

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .inactiveSearchBox
{
    background-color: #f0f0f0;
    border: solid 1px #ffffff;
}

.activeSearchBox
{
    border: groove 1px #d9d9d9;
    background-color: #ffffff;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        With Input :<input type="text" class="inactiveSearchBox" id="SearchStrng"
   value=" Search Here"
   onFocus="this.className='activeSearchBox'; if(this.value==' Search Here')this.value='';"
   onBlur="if(this.value=='')this.value=' Search Here';this.className='inactiveSearchBox';" />
        <br />
        <br />
        With TextBox :
        <asp:TextBox ID="TextBox1" runat="server" CssClass="inactiveSearchBox" Text=" Search Here"
   onFocus="this.className='activeSearchBox'; if(this.value==' Search Here')this.value='';"
   onBlur="if(this.value=='')this.value=' Search Here';this.className='inactiveSearchBox';" ></asp:TextBox></div>
    </form>
</body>
</html>

Good Luck

Advertisements
Categories: CSS
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: