Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
13 Sep

Styling File Inputs with CSS and DOM

  • Forms, License Free
  • Leave a Comment

When we are styling forms with CSS, we can style the text fields and buttons easily. However, File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. Shaun Inman (founder of Mint) has shown us a simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. We are now be able to style File input buttons as well.

style-file-input.gif

Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.shauninman.com/assets/examples/styling-file-inputs/
License: License Free

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Drag & Drop File Upload with HTML5 & JavaScript

Drag & Drop File Upload with HTML5 & JavaScript

Fancy Form Styling and Advanced Form Functionality

Fancy Form Styling and Advanced Form Functionality

Open Source HTML5 Rich Text Editor

Open Source HTML5 Rich Text Editor

CRIR: Checkbox & Radio Input Replacement

CRIR: Checkbox & Radio Input Replacement

Tutorial: Advanced Uploading Techniques Part I & II

Tutorial: Advanced Uploading Techniques Part I & II

Firefox-Like Ajax File Upload with Progress Bar

Firefox-Like Ajax File Upload with Progress Bar

Comments
  • Pingback: Gilbert “Gilbitron” Pellegrom » » Styling File Inputs… Finally!

  • http://www.gilbertpellegrom.co.uk Gilbitron

    Hey man. Thanks again for this. Can’t wait to use it.

  • Pingback: Personalizar Los Inputs File Con CSS y Javascript

  • Pingback: Actualidad, Entretenimiento y Humor » Personalizar Los Inputs File Con CSS y Javascript

  • http://www.chargedmind.com marius

    Looks very very nice!

    I will try this in my new project!

  • Pingback: WebAppers: Only The Best Free Resources For Web Developers | Blogging Fingers

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • The Most Well-Made, Free & Open Source Fonts
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Make FullScreen Page Transitions with CSS
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu86
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code54
  • eCommerce24
  • Framework214
  • Hosting13
  • Information238
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free738
  • MIT License408
Sponsors
Advertise Here
Partners
NetDNA