如何在语义上为用作输入的非输入元素添加标签

我目前正在一个网站上工作,该网站包含大量样式化的输入,例如使用 <label> -element to style checkboxes :

<label class="checkbox">
  <input type="checkbox">
  <span></span>
</label>

标准在哪里 <input> 类型无法可靠地进行样式化,例如,我们已经用其他元素类型重新创建了必要的功能 <input type="range"> 已替换为以下内容(以及一点javascript):

<div class="rangeinput">
  <div class="rangeinput-thumb></div>
  <div class="rangeinput-slider"></div>
</div>

现在的问题是如何在语义上为这些元素添加标签。

对于常规输入 <标签> -元素将起作用,但对于提供的示例 neither <label> nor <div> are allowed content of a <label> .

通过为复选框指定id并使用 for -属性,这样就不必将其放置在其他标签周围。但这不适用于任何自定义元素,因为它们不是 labelable 和 最好对每个输入使用单一的解决方案 .

目前,我正在将每个输入像元素一样包装到 <fieldset> 用一个 <legend> ,但这感觉更像是一种黑客行为,而不是真正帮助语义学:

<fieldset>
  <legend>A styled rangeinput:</legend>
  <div class="rangeinput">
    <div class="rangeinput-thumb></div>
    <div class="rangeinput-slider"></div>
  </div>
</fieldset>

这个问题不是关于元素的点击聚焦效果,而是如何在语义上将简短的描述性文本与接受用户输入的元素相关联。