Submit your widget

Very useful color Prefix & Postfix Input Form

Created 6 years ago   Views 27821   downloads 5886    Author webstuffshare
Very useful color  Prefix & Postfix Input Form
View DemoDownload 244.8 KB
133
Share |

This library contains twenty four different icons, they are : email, link, external-link, attach, tag, home, key, credit-card, cart, user, trash, folder, save, marker, setting, edit, bookmark, calendar, gplus, twitter, github, pinterest, linkedin and facebook.

Technology & Usage

I’m using jQuery for adding prefix and postfix beside the input form and CSS for styling, for the background color I’m using linear-gradient with support up to four different vendor prefixes (-moz, -webkit, -o & -ms) and also the standard code. For the icons, like I describe before I’m using Font Awesome. I also add support for placeholder attribut on the input for old browser

To use this set, include minippfix.css and minippfix.js along with modernizr.js andjquery.js, put font/ folder to the right place. After all set, you can already use this library by describing like following markup :

<!-- 1st prefix with email icon and default color (grey) -->
<input type="text" placeholder="Type here..." class="ppfix pre email">

<!-- 2nd postfix with google plus icon and default color (grey) -->
<input type="text" placeholder="Type here..." class="ppfix post gplus">

<!-- 3rd prefix with home icon and blue color -->
<input type="text" placeholder="Type here..." class="ppfix pre home blue">

As you can see above there are three to four class name we need to put on class attribute, first isppfix, this class name needed to as default class name, pre or post class name is for the position (prefix or postfix), the third is icon name it can be emailgplushome or other icon name (see demo) and the last class name is color. Here are the result from above markup :

Read more:http://www.webstuffshare.com/2012/07/mini-collection-for-prefix-postfix-input-form/

Tag: form