Add clearable input form support

css/ebi-global.css

@@ -718,6 +718,20 @@ h6 a span.link-pdf { display:none; }
   #ebi_search_results { display: none; }
 }
 
+/* Clearable text inputs
+   Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */
+input.clearable {
+  background: #fff url('data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=') no-repeat right -10px center;
+  border: 1px solid #999;
+  padding: 3px 18px 3px 4px;
+  border-radius: 3px;
+  transition: background 0.4s;
+}
+input.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
+input.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
+input.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
+
+
 /* Tablesorter styling */
 table.tablesorter thead tr .header {
   background-image: url(../libraries/tablesorter/themes/blue/bg.gif);

js/foundationExtendEBI.js

@@ -10,6 +10,18 @@
   var localMenuOption = $('ul.dropdown.menu.float-left').html();
   $('ul.dropdown.menu.float-left').prepend('<li class="show-for-small-only"><a href="#">Also in this section</a><ul class="menu">' + localMenuOption + '</ul></li>');
 
+  // Clearable text inputs
+  // Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text 
+  function tog(v){return v?'addClass':'removeClass';} 
+  $(document).on('input', '.clearable', function(){
+    $(this)[tog(this.value)]('x');
+  }).on('mousemove', '.x', function( e ){
+    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
+  }).on('touchstart click', '.onX', function( ev ){
+    ev.preventDefault();
+    $(this).removeClass('x onX').val('').change();
+  });
+
   $.fn.foundationExtendEBI = function() {
     // Link overlay images
     $(function() {