Relisora Relisora - 1 year ago 70
HTML Question

How to make my own select

I wish to make my own select.

Actually my select looks like this :

enter image description here

JS Fiddle

and is it coded like this :

<input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
<datalist id="liste_color3">
<option value="#FFFFFF">
<option value="#999999">
<option value="#000000">
<option value="#582810">

And i want to make it look like that :

combobox then

How can i do this ?

What do i need to do to be able to personalize the interface in my

Where can i find documentation to be able to do so ?

Thank you very much :)

Answer Source

The datalist cannot be modified with css, even if you could with some css-magic, you could never get multiple items inside of the datalist options. The only solution is to create a select box from scratch.

I was bored so I made you something you can start with:


<div class="color-picker">
    <input id="color-input" type="hidden" name="coloris_panneau" value=""/>
    <div class="color-value list-item">Select your color</div>
    <div class="list">
        <div class="list-item" data-color="#edae0e">
            <span style="background:#edae0e;"></span>
        <div class="list-item" data-color="#ff0000">
            <span style="background:#ff0000;"></span>
        <div class="list-item" data-color="#336699">
            <span style="background:#336699;"></span>


* {
    box-sizing: border-box;
.color-picker {
    height: 30px;
    width: 150px;
    overflow: hidden;
    color: #666;
    background: #FFF;

.open {
    overflow: visible;;

.list {
    border: 1px solid #CCC;
    border-top: none;
    background: #FFF;
.list-item {
    padding: 5px;
    cursor: pointer;
.list-item:hover {
    background: #f1f1f1;
.list-item > span {
    display: inline-block;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
.list-item > span:first-child {
    width: 20px;
    margin-right: 5px;
.color-value {
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    width: 100%;
    cursor: pointer;
    border: 1px solid #CCC;


$('html').on("click",function(e) {
$(document).on("click",".color-value",function(e) {
    if( $('.color-picker').hasClass('open') ){
$(document).on("click",".list-item",function() {
    var color = $(this).data('color');
    $('.color-value').html( $(this).html() );

    //This is now the value of your hidden input field