Fancy looking filefields

pastebin/templates/pastebin/geometry.html

@@ -16,7 +16,7 @@
   	<script src="{{STATIC_URL}}js/thingview.js/three.min.js"></script>
   	<script src="{{STATIC_URL}}js/thingview.js/thingiview.js"></script>
 
-  	<script>
+  	<script type="text/javascript">
     	$(window).load(function() {
       	// You may want to place these lines inside an onload handler
       		CFInstall.check({

pastebin/templates/pastebin/geometry_create.html

@@ -1,7 +1,33 @@
 {% extends "base.html" %}
 
+
 {% block title %} New paste {% endblock %}
 
+
+{% block headeraddons %}
+<script src="{{STATIC_URL}}js/jquery-1.10.2.min.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $("input[type='file']").each(function () {
+        $(this).hide();
+        $(this).after(' <a href="#" class="browsebutton pure-button button-lightblue">Browse</a>');
+        $(this).after('<input type="text" readonly/>'); 
+    
+        $(this).change(function() {
+            $(this).next().val($(this).val());
+        });
+    });
+
+    $(".browsebutton").click(function() {
+        console.log("foo");
+        $(this).prev().prev().click();
+    });
+});
+
+</script>
+{% endblock %}
+
+
 {% block content %}
 <div id="content">
 	<div id="prompt">

static_common/css/layout.css

@@ -47,6 +47,8 @@
   .textcontainer .pure-form .errorlist {
     list-style: none;
     color: #e9322d; }
+  .textcontainer .pure-form .browsebutton {
+    font-size: 85%; }
 
 .button-green {
   background-color: #1CB841;

static_common/css/layout.scss

@@ -64,6 +64,10 @@
 			list-style: none;
 			color: #e9322d;
 		}
+
+		.browsebutton {
+			font-size: 85%;
+		}
 	}
 }