Hoi,

Is er een mogelijkheid om de titel te tonen van een datalist.
Ik heb een lijstje aangemaakt van kleuren maar wil er ook de naam bij tonen. Een gebruiker is er niets mee wat de hexcode is zoals deze getoond wordt bij chrome.

Jan
<datalist id="kleuren">
    <option title="wit">#ffffff</option>
    <option title="rood">#ff0000</option>
    <option title="orange">#ffa500</option>
    <option title="geel">#ffff00</option>
    <option title="groen">#008000</option>
    <option title="blauw">#0000ff</option>
    <option title="indigo">#4B0082</option>
    <option title="violet">#EE82EE</option>
    <option title="roze">#FFC0CB</option>
    <option title="grijs">#D3D3D3</option>
    <option title="lightblue">#ADD8E6</option>
    <option title="lightgreen">#90EE90</option>
    <option title="lemoen">#00FF00</option>
    <option title="goud">#FFD700</option>
    <option title="zwart">#000000</option>
</datalist>
<input list="kleuren" name="kleur" type="color" value="#ff0000">


De validatie van w3 heeft alvast geen fouten! wel een waarschuwing dat niet alle browsers het ondersteunen, maar dat wist ik al :)

Alvast bedankt.
Mogelijk kun je de teksten tussen de <option>...</option> zelf een (achter)kleur geven (wel even opletten dat deze leesbaar zijn). En anders misschien opteren voor een lijst van radiobuttons of zelfs een soort van custom veld met wat JavaScript ofzo.

En zorg dat je naamgeving consistent is, nu is deze half engels, half nederlands. Kies een taal. En misschien is het verstandig dat je de selectie ophangt aan een nummer (kleur nummer 5) in plaats van een taalspecifieke tekstuele naam (groen).
Rob Doemaarwat op 30/06/2019 12:58:57

<input type="color">?


Inderdaad :) https://www.w3schools.com/tags/att_input_type_color.asp
Blij dat ik voor sommigen, toch gevorderden, iets toegevoegd heb :)

Thomas van den Heuvel op 30/06/2019 14:45:46

Mogelijk kun je de teksten tussen de <option>...</option> zelf een (achter)kleur geven (wel even opletten dat deze leesbaar zijn). En anders misschien opteren voor een lijst van radiobuttons of zelfs een soort van custom veld met wat JavaScript ofzo.

En zorg dat je naamgeving consistent is, nu is deze half engels, half nederlands. Kies een taal. En misschien is het verstandig dat je de selectie ophangt aan een nummer (kleur nummer 5) in plaats van een taalspecifieke tekstuele naam (groen).

Lukt niet. Als je de namen gebruikt werkt de input niet. deze werkt enkel met hexcodes. Wel kan je een label weergeven. deze wordt bij color echter niet getoond.
Radiobuttons is niet echt een optie. het volledige gamma is ter beschikking. Sorry van de taal in Engels. Was wat knip en plakwerk en even vergeten vertalen.

Jan
Als je een beperkt aantal voorgedefinieerde kleuren wilt aanbieden, is een <datalist> daarvoor niet geschikt. Bij een <datalist> kan de gebruiker namelijk ook andere waarden dan die in de lijst gebruiken. Net als bij een autocomplete van tekst zijn het slechts suggesties waarvan de gebruiker kan afwijken:

https://jsfiddle.net/xaufrnog/
Sorry Wart: zoals ik al schreef: het volledige gamma is ter beschikking.
>> ... zoals ik al schreef: het volledige gamma is ter beschikking.

Dat zeg ik ... GAMMA!




















(Sorry ... ik kon het echt even niet laten.)
ik verkies brico. 't is goedkoper
Dit zou moeten werken:


<datalist id="kleuren">
    <option value="#000000">Zwart</option>
    <option value="#ffffff">Wit</option>
    <option value="#ff0000">Rood</option>
</datalist>
<input list="kleuren" name="kleur" type="color" value="#ff0000">

Reageren