Question

Bokeh呈现这样的复选框

<div class="bk-bs-checkbox">
    <label>
        <input type="checkbox" value="0">
        Label text
    </label>
</div>

但是我想根据输入状态:focus，:disabled，:checked，...

选择标签

由于没有CSS父选择器，我该怎么做才能以自定义方式呈现复选框？我想避免使用JavaScript。如果复选框显示为以下代码，则自定义会更容易：

<div class="bk-bs-checkbox">
    <input type="checkbox" value="0">
    <label>
        Label text
    </label>
</div>

然后我可以使用此CSS代码根据复选框状态选择标签：

.bk-bs-checkbox input[type="checkbox"]:disabled + label::after {
    background-color: red,
}

这只是显示一种使用情况的示例。

有没有简单的方法可以实现这一目标？实际上，我正在bokeh中寻找某种机制来继承呈现该对象的模板，以便使用我的自定义模板对其进行更改。

Answer 1

好吧，终于我找到了一种不是很干净的解决方法，但是它可行。基本上，我隐藏了原始元素，并创建了自己的自定义控件。我已经按照@Gerard的建议使用JavaScript。

首先，我需要等待Bokeh Server加载完毕。所有元素必须已经渲染。因此，我从this answer
然后我使用python属性css_classes和CSS类型display: none;

我已经通过JavaScript创建了元素（实际上我已经启用了jQuery）。这也可以使用bokeh模板来完成。就我而言，我发现这样更方便。然后，我在原始元素之前添加了元素。

var new_cb = $('<div>', {
    class: 'abc-checkbox abc-checkbox-primary',
});
new_cb.append(
    $('<input>', {
        id: 'id_new_cb',
        type: 'checkbox'
    })
);
new_cb.append(
    $('<label>', {
        for: 'id_new_cb',
        text: 'Custom element'
    })
);
$('.original_cb').before(new_cb);

最后，我添加了一个事件以触发原始隐藏元素上的事件：

$('#id_new_cb').change(function() {
    if(this.checked) {
        $('.original_cb input').click();
    } else {
        $('.original_cb input').click();
    }
});

其余元素也可以做类似的事情。如果您只想更改几个元素，这将很有用。如果没有，这将变得很麻烦。

如何以自定义方式呈现CheckboxGroup（或任何其他元素）？

1 个答案: