The following CSS will style the textbox.
.styled-textbox{
border:1px solid #d1c7ac;
width: 200px;
height:30px;
padding:5px;
background: -moz-linear-gradient(center top , #FFF, #EEE 1px, #FFF 25px) repeat scroll 0% 0% transparent;
}
.styled-textbox:hover{
border:1px solid #25A6E1;
}
.styled-textbox:focus{
box-shadow: 0px 0px 5px #00AFC7;
border:1px solid #25A6E1;
}
border:1px solid #d1c7ac;
width: 200px;
height:30px;
padding:5px;
background: -moz-linear-gradient(center top , #FFF, #EEE 1px, #FFF 25px) repeat scroll 0% 0% transparent;
}
.styled-textbox:hover{
border:1px solid #25A6E1;
}
.styled-textbox:focus{
box-shadow: 0px 0px 5px #00AFC7;
border:1px solid #25A6E1;
}
Preview:
Now to style any textbox as above add above css class(.styled-textbox) to it .For example:
In HTML:
<input type="text" id="textbox1" placeholder="Type Here" class="styled-textbox" />
In ASP.NET:
<asp:Textbox ID="Button1" runat="server" placeholder="Type Here" CssClass="styled-textbox" />
No comments:
Post a Comment