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 :


   

No comments:

Post a Comment