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

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 *

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
Clean White Polygon Backgrounds a

Related