CSS Trick: Sliding Input

sliding input example CSS Trick: Sliding Input

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:

select icon CSS Trick: Sliding Input
.i{transition-duration:600ms;transition-property:width, background;transition-timing-function:ease;width:200px;}
  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

select icon CSS Trick: Sliding Input
#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}
select icon CSS Trick: Sliding Input
<div id="i"><input class="i" type="text" value="Text" /></div>