Permalink
Browse files

added file field mask recipe

  • Loading branch information...
1 parent 472e9ed commit 82956f765daaa3fd5fd8f9f2fd4508b1d451e4d4 @ntreadway ntreadway committed Jun 1, 2011
@@ -0,0 +1,10 @@
+/*Author Nick Treadway
+License http://creativecommons.org/licenses/publicdomain/
+Follow me http://twitter.com/nicktea
+Date: Wed June 1 2011*/
+ol { list-style-type: none; }
+ol li.file { width: 100%; height: 50px; }
+ol li.file label { float: left; line-height: 15px; margin: 10px; }
+ol li.file input[type=file] { height: 35px; font-size: 20px; position: relative; text-align: left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; z-index: 2; }
+ol li.file #fake-file-field { background: url(../images/file-field-mask.png) no-repeat; position: absolute; left: 95px; top: 50px; height: 50px; font-size: 12px; width: 390px; z-index: 1; }
+ol li.file #fake-file-field .input { height: 50px; left: 10px; overflow: hidden; position: relative; top: 5px; width: 280px; }
@@ -0,0 +1,15 @@
+!!! 5
+%html
+ %head
+ %title File Field Mask
+ %link{:rel => "stylesheet", :href => "file-field-mask.css"}
+ %body
+ %section#container
+ %aside
+ %p File Field Mask Demo - kill that unwanted standard look.
+ %ol#demo
+ %li.file
+ %label File:
+ #fake-file-field
+ .input
+ %input{:type => 'file'}
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>File Field Mask</title>
+ <link href='file-field-mask.css' rel='stylesheet' />
+ </head>
+ <body>
+ <section id='container'>
+ <aside>
+ <p>File Field Mask Demo - kill that unwanted standard look.</p>
+ </aside>
+ <ol id='demo'>
+ <li class='file'>
+ <label>File</label>
+ <div id='fake-file-field'>
+ <div class='input'></div>
+ </div>
+ <input type='file' />
+ </li>
+ </ol>
+ </section>
+ </body>
+</html>
@@ -0,0 +1,44 @@
+/*Author Nick Treadway
+License http://creativecommons.org/licenses/publicdomain/
+Follow me http://twitter.com/nicktea
+Date: Wed June 1 2011*/
+
+ol {
+ list-style-type: none;
+ li.file {
+ width: 100%;
+ height: 50px;
+
+ label {
+ float: left;
+ line-height: 15px;
+ margin: 10px;
+ }
+ input[type=file]{
+ height:35px;
+ font-size:20px;
+ position: relative;
+ text-align: left;
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0;
+ z-index: 2;}
+ #fake-file-field {
+ background: url(../images/file-field-mask.png) no-repeat;
+ position: absolute;
+ left: 95px;
+ top: 50px;
+ height: 50px;
+ font-size: 12px;
+ width: 390px;
+ z-index: 1;
+ .input {
+ height: 50px;
+ left: 10px;
+ overflow: hidden;
+ position: relative;
+ top: 5px;
+ width: 280px;}
+ }
+ }
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 82956f7

Please sign in to comment.