Is it possible to have a h:selectOneRadio with text before and after radio buttons?

Question

I wish to make HTML radio buttons which have labels after them, and also numbers in front of them. Is this possible to do this with standart HTML input tag and CSS? Javascript is also acceptable if not too complex, say with Jquery. The list of elements is created with JSF h:selectOneRadio tag, and I wish to still keep use of this tag, if possible without splitting into separate h:selectOneRadio elements.

JSF looks like this:

<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>

Generated html looks something like this:

<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>

I tried CSS like this

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

but it only adds constant number before each checkbox.

The output should look like

○ Option1
⦿ Option2
○ Option3

_“The element is created with JSF h:selectOneRadio tag”_ - please show the actual HTML code that creates. AFAIK it takes a label text as parameter already, so I would assume that outputs some sort of label-input combination already, maybe wrapped in an additional container element already … so all you’d need to do probably was add numbering with CSS. — 04FS, Apr 08 '19 at 08:20
If using Mojarra you'll have to extend `com.sun.faces.renderkit.html_basic.RadioRenderer` and override methods responsible for rendering the layout and options. — Selaron, Apr 08 '19 at 09:22

score 1 · Answer 1 · answered Apr 08 '19 at 08:20

The easiest way to do this is by using the standard HTML <ol> tag to get an ordered list like this:

<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>

pavelbere · Answer 2 · 2019-04-08T15:01:35.383

-1

Sure, just add any tag with your text before <input> tag

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

edited Apr 08 '19 at 15:01

answered Apr 08 '19 at 08:19

pavelbere

964
10
21

Vishwa · Answer 3 · 2019-04-11T08:16:42.587

-1

Yes.

Try your HTML as follows,

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

Then add CSS for the li elements as follows

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

edited Apr 11 '19 at 08:16

answered Apr 08 '19 at 08:21

Vishwa

801
11
26

1. A JSF solution is requested. 2. Your HTML is invalid (try with https://validator.w3.org/#validate_by_input ). 3. It's better to do such styling based on a class instead of an id. – Jasper de Vries Apr 11 '19 at 07:54
The first reason is the reason why all answers currently given here are wrong. – Jasper de Vries Apr 11 '19 at 07:56
@JasperdeVries quoting OP **Is this possible to do this with standart HTML input tag and CSS? Javascript is also acceptable if not too complex** so although jsf tagged, OP is asking for simple HTML and CSS solution. I updated my html and checked validity. thank you for that. 3. id or class, OP can decide that, but this works. – Vishwa Apr 11 '19 at 08:14
As you can see in the duplicate you could use HTML with JSF, but it would require passthrough elements. 4. The styling is not what was requested. – Jasper de Vries Apr 11 '19 at 08:24
when I answered this, there was no JSF code. only the first paragraph. see for yourself in edit history – Vishwa Apr 11 '19 at 08:26
You're right. Now it has though. – Jasper de Vries Apr 11 '19 at 08:38
1

@JasperdeVries I think most of the answers were based on HTML, just because OP asked for that.. – Vishwa Apr 11 '19 at 08:39

Is it possible to have a h:selectOneRadio with text before and after radio buttons?

3 Answers3