CSS Trick: Sliding Input

search-form
Tweet about this on Twitter0Share on Google+0Share on Facebook2Pin on Pinterest0Share on Tumblr
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:

Select Code
1
2
3
4
5
6
7
8
9
10
.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
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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
Select Code
1
<div id="i"><input class="i" type="text" value="Text" /></div>
Result

 

 

What do you think of this post?
  • Agree 
  • Disagree 
  • Neutral 
  • Useful 
  • Interesting 
  • Awesome 
Backgrounds: Clean White Polygon
jv16 PowerTools will be Open Source in 2014?