在jsf/html中使用复选框实现一个模态，每个复选框周围都有虚线框？

我想为下面的模态结构编写一个html/jsf代码：

我只需要知道如何在两个复选框周围设置虚线框

我需要实现我所展示的上述模式

我使用jsf所做的是：

                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>&nbsp;
                    <h:selectBooleanCheckbox value="" class="input-element">
                    </h:selectBooleanCheckbox>
                    <label> <h:outputText value="STAT 1 (Tyr701)" />
                    </label>

我只是尝试了上面的代码，只是手动添加复选框和标签，这不是一个好的解决方案

请帮帮我。

这是一个简单的例子-： HTML

<div class="input-box">
  <label class="label-float">
    <input type="checkbox" name="example" value="one">value one
  </label>

  <label class="label-float">
    <input type="checkbox" name="example" value="two">value two
  </label>
</div>

.input-box {
  border: 1px dotted #000;
  padding: 10px;
  display: block;
  width: 240px;
}
.input-box::after {
  content: "";
  clear: both;
  display: table;
}
.label-float {
  float: left;
  display: block;
  width:50%;
}