Spectrum color picker: the original input field is showing

Question

I'm using the following code:

<script src="/js/spectrum.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/spectrum.css" />
<script type="text/javascript">

  jQuery(function() {
    var opts = {
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxSelectionSize: 20,
        preferredFormat: "hex"
    };
    jQuery( '#driverColor' ).spectrum( opts );
  } );

</script>
...
<input type="text" name="driverColor" value="#ff0000" id="driverColor" />

when I hit the color picker, the original input field is also appearing:

How can I fix it? TIA

Answer 1

This may be a little late but, in an older rails app (2.3.4), I was able to force the original input field to not show up by adding width, height, border and padding to the style of the input eg:

<input id="your_id" name="your_field_name" type="text" style="width:0;height:0;padding:0;border:0;">