CSS Trick: Sliding Input

sliding-input-example

I found this css trick when previewing the default WordPress theme namely ‘Twenty-Thirteen’. The sliding effects can be applied on any web base form. I only tested it with <input> tag but I don’t know if also going to work with <textarea> tag. You can add it to your search form template, comment form template or etc.

You need to assign an ‘ id ‘ or ‘ class ‘ first to your input element. In this example; I’m using ‘ class ‘ and named it as ‘ i ‘.

Add this parameters to your CSS stylesheet:

CSS
.i {
transition-duration: 600ms;
transition-property: width, background;
transition-timing-function: ease;
width:200px;
}

.i:focus {
width:400px;
}

  1. In the first line you will set the transition settings (speed, width). I have set the speed to 600ms and default width to 200px. Adjust these to your liking. (refer above)
  2. The second line is where you set the input to expand when user click the input area by using pseudo-class ‘ :focus ‘. The width will revert back to default size when user click outside the input area. (refer above)

Live Example

See Also:  MYO's Gesture Control Armband
CSS
#i input.i {
background-color: #efefef;
border: 2px solid #ccc;
color: #777;
display: block;
font-size: 12px;
height: 30px;
line-height: 1.2em;
margin: -3px 1px 0 0;
padding: 2px 0 3px 24px;
}

.i {
transition-duration: 600ms;
transition-property: width, background;
transition-timing-function: ease;
width: 200px;
}

.i:focus {
width: 400px;
background-color: #fff;
}

Html
<div id="i"><input class="i" type="text" value="Text" /></div>
Result

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Next Post

Backgrounds: Clean White Polygon

Thu Jan 2 , 2014
10 super high resolution abstract polygon backgrounds pack. Backdrops in design work or presentations. Computer desktop or mobile devices wallpapers. Suitable for high resolution Retina displays. Each of the patterns measures in at 5120px — 2880px. Designed by Tony Thomas | Download See Also:  3D Color X-Rays
Clean White Polygon Backgrounds a