html - 只有三种颜色的下拉菜单

Question

我设法为输入类型颜色下拉菜单设置了三种颜色，但我只需要显示三种选定的颜色，而不是全部。可能吗？这是我的代码。谢谢。

<input type="color" list="presetColors" class="form-control">
            <datalist id="presetColors">
                <option>#ff0000</option>
                <option>#00ff00</option>
                <option>#0000ff</option>
            </datalist>

标签： htmlcss

Answer 1

我将其更改input为select. 然后将该选项传递给一个类并设置背景。

select.form-control option.class1 { 
    /* Whatever color  you want */
    background-color: #ff0000;
}
select.form-control option.class2 { 
    /* Whatever color  you want */
    background-color: #00ff00;
}    
select.form-control option.class3 { 
    /* Whatever color  you want */
    background-color: #0000ff;
}

<select type="color" list="presetColors" class="form-control">
        <datalist id="presetColors">
            <option class="class1" >#ff0000</option>
            <option class="class2">#00ff00</option>
            <option class="class3">#0000ff</option>
        </datalist>
</select>