Gibt es eine Möglichkeit, die Auswahlmöglichkeiten auf Datenliste in Eingabetyp = Farbe zu beschränken und die andere ... Option zu deaktivieren?

Der folgende Code generiert das Drop-down, um die Farben aus dem Datenlisten auszuwählen, aber auch eine "andere" Option. Ich möchte die Auswahl der Farben auf diejenigen beschränken, die ich als Optionen zur Verfügung stelle.Gibt es eine Möglichkeit, die Auswahlmöglichkeiten auf Datenliste in Eingabetyp = Farbe zu beschränken und die andere ... Option zu deaktivieren?

<input type="color" id="some id" name="someName" list="rainbow" value="#FF0000"> 
<datalist id="rainbow"> 
    <option value="#FF0000">Red</option> 
    <option value="#FFA500">Orange</option> 
    <option value="#FFFF00">Yellow</option> 
    <option value="#008000">Green</option> 
    <option value="#0000FF">Blue</option> 
    <option value="#4B0082">Indigo</option> 
    <option value="#EE82EE">Violet</option> 
</datalist>

Quelle

2016-04-05 Saurabh Gupta

Hmmm ... das scheint nicht ein option..no Wortspiel beabsichtigt zu sein. –

@Paulie_D Die Option "Other" wird vom Browser automatisch hinzugefügt (Chrom sowieso), da der Eingabetyp eine Farbe ist –

Ich schätze dies nicht wirklich eine Antwort, aber es ist ein bisschen zu detailliert für einen Kommentar :)

Die Liste der Optionen nur überhaupt sowieso auf Chrome, Opera und Android macht. In Firefox ist es nur ein Farbrad, und in Internet Explorer, Safari, Edge, iOS, Windows Phone und Opera Mini ist es eine schrecklich nicht benutzerfreundliche Textbox, in die der Benutzer die Hex-Codes eingeben muss, ohne Standardoptionen unter der Voraussetzung.

Angenommen, Sie bieten nur eine kleine Anzahl von Farben zur Auswahl an, und da Sie die Farbradfunktion auch in den 4 Browsern nicht benötigen, wäre es nicht besser, nur eine Liste anzubieten von Radio-Tasten? Ein bisschen CSS und eine Prise von JS und das sieht anständig den ganzen Weg nach IE8 zurück:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Color example</title> 
     <style> 
      .color label { 
       border-right: solid 1.4em #ddd; 
       width: 6em; 
       display: inline-block; 
       margin: 3px 1em 3px 0; 
       padding: 1px; 
       background: #ddd; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="someId" class="color"> 
      <label><input name="someName" type="radio" value="#FF0000" checked="checked">Red</label> 
      <label><input name="someName" type="radio" value="#FFA500">Orange</label> 
      <label><input name="someName" type="radio" value="#FFFF00">Yellow</label> 
      <label><input name="someName" type="radio" value="#008000">Green</label> 
      <label><input name="someName" type="radio" value="#0000FF">Blue</label> 
      <label><input name="someName" type="radio" value="#4B0082">Indigo</label> 
      <label><input name="someName" type="radio" value="#EE82EE">Violet</label> 
      <script> 
       var options = document.getElementById("someId").getElementsByTagName("input"); 
       for (var option = 0; option < options.length; ++option) { 
        options[option].parentNode.style.borderColor = options[option].value; 
       } 
      </script> 
     </div> 
    </body> 
</html>

Quelle

2016-04-22 19:07:18

Gibt es eine Möglichkeit, die Auswahlmöglichkeiten auf Datenliste in Eingabetyp = Farbe zu beschränken und die andere ... Option zu deaktivieren?

Antwort

Verwandte Themen