Tuesday, 30 April 2013

CSS style input box design coding


This coding we discus about style input box design using CSS3. Normally input box design make on using some normal css but css3 induced on-click cursor focus function. when user click input box  cursor focus on the stage change input box style watch below live demo. 





Live Demo:


Focus an Textbox *

Hover Change the button

Login / Signup
Username
Password

Copy the below CSS script enter the below css name on textbox name 

<style type="text/css">
.design_form input[type=text]
{
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:200px;
  min-height: 28px;
  padding: 4px 20px 4px 8px;
  font-size: 12px;
  -moz-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
.design_form input[type=text]:focus
{
  width: 400px;
  border-color: #51a7e8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
  outline: none;
}
</style>
Copy the style  on head tag after run the page just click the input box cursor focus style

Download Coding :


   

2 comments:

  1. Likes enormously raise the popularity of one's webpage and with all the excellent collection depend; many folks may be drawn to your account. The businesses that deliver these items and companies, will deliver you with non-automated or robotic likes and supply you with genuine Instagram likes. buy instagram followers and likes The good element regarding this is definitely the undeniable fact that they are instantaneously shipped towards your account consequently you don't have to wait that a great deal. And when you are a firm, elevating your Instagram likes will be beneficial.

    ReplyDelete