Question

我希望自己选择。

实际上我的选择看起来像这样：

并且编码如下：

<p>Title</p>
<form>
    <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">
    </datalist>
</form>

我想让它看起来像那样：

我该怎么做？

我需要做些什么才能在combobox中个性化界面？

我在哪里可以找到能够这样做的文档？

非常感谢：）

Answer 1

无法使用css修改数据列表，即使你可以使用某些css-magic，也无法在datalist选项中获得多个项目。唯一的解决方案是从头开始创建一个选择框。

我很无聊所以我给你做了一些你可以开始的事情：

https://jsfiddle.net/wietsedevries/c05331jm/1/

html：

<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>
            <span>Yellow</span>
        </div>
        <div class="list-item" data-color="#ff0000">
            <span style="background:#ff0000;"></span>
            <span>Red</span>
        </div>
        <div class="list-item" data-color="#336699">
            <span style="background:#336699;"></span>
            <span>Blue</span>
        </div>
    </div>
</div>

的CSS：

* {
    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;
}

使用Javascript：

$('html').on("click",function(e) {
    $('.color-picker').removeClass('open');
});
$(document).on("click",".color-value",function(e) {
    e.stopPropagation();
    if( $('.color-picker').hasClass('open') ){
        $('.color-picker').removeClass('open');
    }else{
        $('.color-picker').addClass('open');
    }
});
$(document).on("click",".list-item",function() {
    var color = $(this).data('color');
    $('#color-input').val(color);
    $('.color-value').html( $(this).html() );

    //This is now the value of your hidden input field
    $('#value').html(color);
});

如何自己选择

1 个答案: