Question

我希望制作HTML单选按钮，该按钮后面带有标签，并且前面还带有数字。是否可以使用标准的HTML输入标签和CSS做到这一点？如果不太复杂，也可以使用Javascript，例如使用Jquery。元素列表是使用JSF h：selectOneRadio标记创建的，如果可能的话，我希望仍继续使用此标记，而不必将其拆分为单独的h：selectOneRadio元素。

JSF看起来像这样：

<h:selectOneRadio id="#{id}" label="#{label}"  value="#{customValue}" 
  immediate="#{immediate}" requiredMessage="#{requiredMessage}"
                >
                <f:selectItems var="item"
                    value="#{classifier[empty classifier ? property : classifier]}"
                    itemLabel="#{empty itemLabel?item.meaning:itemLabel}"
                    itemValue="#{item}" />
                <ui:insert />
            </h:selectOneRadio>

生成的html看起来像这样：

<tbody>
<tr>
    <td>
        <input id="0" type="radio" name="mcData" value="1200" >
            <label for="0"> option1</label>
    </td>
</tr>
<tr>
    <td>
        <input id="1" type="radio" name="mcData" value="1199">
        <label for="1"> option2</label>
    </td>
</tr>
</tbody>

我尝试过这样的CSS

 .radio::before {
        content: "1";
    }

但它只会在每个复选框前添加常数。

输出应类似于

○选项1
⦿选项2
○选项3

Answer 1

最简单的方法是使用标准HTML <ol> tag获取如下的有序列表：

<ol>
  <li>
    <input type="radio" name="myRadio" id="radio1">
    <label for="radio1">Option 1</label>
  </li>
  <li>
    <input type="radio" name="myRadio" id="radio2">
    <label for="radio2">Option 2</label>
  </li>
  <li>
    <input type="radio" name="myRadio" id="radio3">
    <label for="radio3">Option 3</label>
  </li>
</ol>

Answer 2

当然，只需在<input>标记之前添加带有文本的任何标记

<form>
  <p>1. <input type="radio"> option1</p>
  <p>2. <input type="radio"> option2</p>
  <p>3. <input type="radio"> option3</p>
</form>

Answer 3

是的

按如下所示尝试HTML，

<ol id="chk-bx">
    <li><input type="radio">Value1</li>
    <li><input type="radio">Value2</li>
    <li><input type="radio">Value3</li>
</ol>

然后为li元素添加CSS如下

#chk-bx li{
    list-style-type: circle;
}

单选按钮之前和之后是否可以使用带有文本的h：selectOneRadio？

3 个答案: