css - 使用 xp :checkBoxGroup and trying to put a simple box border around all the values

Question

目前唯一可用的选项似乎是 border=x，其中 x 是边框的粗细。它看起来非常丑陋，因为它概述了组中的每个选择。

我想要一个简单的边框围绕所有的选择。当我进行调试时，我可以手动将 fram="box"添加到生成的 Table html 中，它看起来很棒。

我不知道如何将 frame="box"添加到 xp:checkBoxGroup 我尝试使用属性但没有成功。

有什么想法吗？

Answer 1

如果您使用 xp:checkBoxGroup，则 XPages 运行时会将复选框放在表格单元格中，并用 fieldset 元素将其包装起来。您可以使用一些 CSS 轻松地定位它。这就是我解决这个问题的方法。

如果你想在你的复选框组周围添加一个简单的边框，你可以这样做:

<style>
    fieldset.xspCheckBox {
        border: 1px solid #333333;
    }
</style>

<xp:checkBoxGroup id="checkBoxGroup1">
    <xp:selectItem
        itemLabel="Blue"
        itemValue="blue">
    </xp:selectItem>
    <xp:selectItem
        itemLabel="Green"
        itemValue="green">
    </xp:selectItem>
</xp:checkBoxGroup>

或者如果你想在每个选项周围加一个边框，你可以使用这个:

<style>
    fieldset.xspCheckBox {
        border: 0;
    }
    fieldset.xspCheckBox label {
        border: 1px solid #444444;
        padding: 5px;
        cursor: pointer;
    }
    fieldset.xspCheckBox label:hover {
        background: #eeeeee;
    }
</style>

(请注意，:hover 类并不是真正必需的，但会为所有选项添加悬停效果:取决于您的浏览器要求，可能不支持)