Thursday, 22 January 2015

Styled Textbox using CSS


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;
}

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