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:

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

Loading animation by using CSS only. No gif images required. You can customized it by changing background colors, resize, adding ...
READ MORE
How to remove WordPress lightbox gallery images border
This problem was posted in WordPress support forum 6 years ago and it is still relevant to this day. I ...
READ MORE
Free Responsive iOS7 Style Template
This free fully coded HTML5 and CSS3 'Coming Soon' template features elegant iOS 7 style and ultra-thin UI elements with ...
READ MORE
Learning How To Code With Treehouse
Treehouse, a leading online education provider, seeks to help prospective coders become great coders by providing a rich libraries of ...
READ MORE
Free Social Media Buttons Created With CSS3
A set of social media buttons created entirely with CSS3. Using 'social glyphs' web font (included in the package). Extract ...
READ MORE
Tutorial on how to style your post "Previous/Next" navigation links that can be found in "single.php" file. The navigation links ...
READ MORE
Mobirise: Drop-Dead Easy Mobile Friendly Website Builder
Looking for a website builder app? You don't have the coding knowledge when it comes to creating your own website? ...
READ MORE
CSS: Hyperlinks with Highlighter Marker Pen Effect
Using CSS, you can make text look as if it's been underlined with a highlighter marker pen and it will ...
READ MORE
Loading Animation With CSS
How to remove WordPress lightbox gallery images border
Free Responsive iOS7 Style Template
Learning How To Code With Treehouse
Free Social Media Buttons Created With CSS3
CSS: Styling WordPress Previous-Next Post Navigation Links
Mobirise: Drop-Dead Easy Mobile Friendly Website Builder
CSS: Hyperlinks with Highlighter Marker Pen Effect

Previous Post

jv16 PowerTools will be Open Source in 2014?

Next Post

Backgrounds: Clean White Polygon