Html 只有三种颜色的下拉列表

我设法为输入类型颜色下拉列表设置了三种颜色，但我只需要显示三种选定的颜色，而不是所有颜色。可能吗？这是我的密码。谢谢

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

#ff0000
#00ff00
#0000ff

我将

输入

更改为

选择

。然后将该选项传递给一个类并设置背景

select.form-control option.class1{
/*你想要什么颜色都行*/
背景色：#ff0000；
}
select.form-control option.class2{
/*你想要什么颜色都行*/
背景色：#00ff00；
}    
select.form-control option.class3{
/*你想要什么颜色都行*/
背景色：#0000ff；
}

#ff0000
#00ff00
#0000ff

我知道这不是答案，但它解决了问题

let button=document.queryselectoral（“.button”）；
let palete=document.queryselectoral（“.palete”）；
for（设i=0；i

.container{
显示器：flex；
}
.按钮{
保证金：0.2rem；
宽度：2em；
高度：2em；
边界半径：50%；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
布莱克先生{
背景色：黑色；
}
.橙色{
颜色：白色；
背景颜色：橙色；
}
.调色板{
保证金：1雷姆0；
高度：1公厘；
宽度：10雷姆；
边界半径：10px；
}

你好，朱利安。正确，但正如您在代码片段中所注意到的，它显示了托盘上的三种颜色和其他可用颜色。我只需要显示这三种颜色，这样用户就可以选择这三种颜色中的一种。你是对的，请检查我的更新答案谢谢Julian。不，这对我不起作用。至少在Safari和Chrome上。它只是显示一个select，其中有三个十六进制代码作为普通文本。