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

238 Total Views 2 Views

Like
Like Love Haha Wow Sad Angry
  • More Posts To Read