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; }
- 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)
- 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
Related articles
- The Elements of an HTML Link (moz.com)
- Whats in a website? (business.yell.com)
- What is CSS? (business.yell.com)
- Website design: The browser problem (Part 2) (business.yell.com)