title: How to remove "other..." option from color picker within HTML?
body: <p><a href="https://i.stack.imgur.com/73PuH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/73PuH.png" alt="I would like to remove the &quot;Other...&quot; button here"></a></p>
  
  <p>How do I remove this "Other..." button?</p>
  
  <p>My HTML code is as follows:
  The code is supposed to update the color of the <p> text by selecting colors from a dropdown. I would like to restrict the user to only the colors I listed.</p>
  
  <pre><code>&lt;body&gt;
    &lt;p&gt;An example demonstrating the use of the &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;
       control.&lt;/p&gt;
  
    &lt;label for="colorWell"&gt;Color:&lt;/label&gt;
    &lt;input type="color" value="#ff0000" id="colorWell" list="presetColors"&gt;
   &lt;datalist id="presetColors"&gt;
     &lt;option&gt;#ff0000&lt;/option&gt;
     &lt;option&gt;#00ff00&lt;/option&gt;
     &lt;option&gt;#0000ff&lt;/option&gt;
   &lt;/datalist&gt;
  
    &lt;p&gt;Watch the paragraph colors change when you adjust the color picker.
       As you make changes in the color picker, the first paragraph's
       color changes, as a preview (this uses the &lt;code&gt;input&lt;/code&gt;
       event). When you close the color picker, the &lt;code&gt;change&lt;/code&gt;
       event fires, and we detect that to change every paragraph to
       the selected color.&lt;/p&gt;
    &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My JavaScript code is as follows:</p>
  
  <pre><code>var colorWell;
  var defaultColor = "#0000ff";
  
  window.addEventListener("load", startup, false);
  
  function startup() {
    colorWell = document.querySelector("#colorWell");
    colorWell.value = defaultColor;
    colorWell.addEventListener("input", updateFirst, false);
    colorWell.addEventListener("change", updateAll, false);
    colorWell.select();
  }
  
  function updateFirst(event) {
    var p = document.querySelector("p");
    console.log(event.target.value);
    if (p) {
      p.style.color = event.target.value;
    }
  }
  
  function updateAll(event) {
    document.querySelectorAll("p").forEach(function(p) {
      p.style.color = event.target.value;
    });
  }
  
      &lt;label for="colorWell"&gt;Color:&lt;/label&gt;
    &lt;input type="color" value="#ff0000" id="colorWell" list="presetColors"&gt;
   &lt;datalist id="presetColors"&gt;
     &lt;option&gt;#ff0000&lt;/option&gt;
     &lt;option&gt;#00ff00&lt;/option&gt;
     &lt;option&gt;#0000ff&lt;/option&gt;
   &lt;/datalist&gt;
  </code></pre>