How to Put Text Inside Radio Button

How to put text inside radio button?

You cannot do that. But instead, you can make something similar using CSS:

label {display: block; padding: 5px; position: relative; padding-left: 20px;}label input {display: none;}label span {border: 1px solid #ccc; width: 15px; height: 15px; position: absolute; overflow: hidden; line-height: 1; text-align: center; border-radius: 100%; font-size: 10pt; left: 0; top: 50%; margin-top: -7.5px;}input:checked + span {background: #ccf; border-color: #ccf;}

<h3>Select One</h3><label><input type="radio" name="select" /><span>a</span> Item 1</label><label><input type="radio" name="select" /><span>b</span> Item 2</label>

Text inside of a radio button

This is probably as good as it gets without going pretty much fully custom javascript:

http://jsfiddle.net/MU95N/

Only css but you're very limited in what you can do. You'd have to see how hard it is to make it cross-browser though, things may not line up right.

<input type="radio" name="one" id="one">
<label for="one">1</label>
<input type="radio" name="one" id="two">
<label for="two">2</label>
<input type="radio" name="one" id="three">
<label for="three">3</label>
<input type="radio" name="one" id="four">
<label for="four">4</label>

--

label{
    position: relative;
    left: -13px;  
    top: -3px;
    font-size: 8pt;
    opacity: .5;
}

How can I put text in a radio button label?

You can simply give the radio buttons IDs.

<label id="rad1-label" for="rad1"></label>

Then you can use

document.getElementById("rad1-label").innerText = arrayQuestion[i].ansA;

Use innerText rather than innerHTML unless you need HTML tags in the answer to be rendered.

Put text input inside label for radio button?

Placing a control inside a label associates that label with that control, and you may only have one control associated with a given label. This is therefore non-conformant HTML.

JavaScript is the better option here.

How to put text or number inside radio button in android?

1. Simply add button.
2. Set background as custom background as per your wish.
3. Handle that button click event.

Text only radio buttons

No scripting needed. Just CSS.

Here's a fiddle: JSFiddle

I don't know exactly what you want, but this is at least proof of concept.

CSS

label {
    display: inline-block;
    width: 100px;
    height: 50px;
    border: solid 2px red;
}
input[type="radio"] {
    display:none;   
}
input[type="radio"]:checked + label {
    border: solid 2px green;
}

HTML

<input type="radio" id="test" name="jeff"><label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff"><label for="test2">Steak</label>

How to put radio button next to the text? - Flutter

Use radio list tiles. They have a title text widget.

RadioListTile(
 title: Text('This Works!'),
 value: true,
 groupValue: //your group value,
 onChanged: (value) {
 //someLogic;
 }),

Text input inside a radio button?

It took 3 steps:
1. Add a label to the radio button
2. Remove tabindexes
3. Add CSS

Here's the updated HTML:

<li class='gchoice_4_4_3'>
    <!-- no more tabindex -->
    <input name='input_4' type='radio' value='gf_other_choice'  id='choice_4_4_3' onfocus="jQuery(this).next('input').focus();" />
    <!-- new label -->
    <label for='choice_4_4_3'>Other</label>
    <!-- no more tabindex -->
<input id='input_4_4_other' name='input_4_other' type='text' value='Other' aria-label='Other' onfocus='jQuery(this).prev("input")[0].click(); if(jQuery(this).val() == "Other") { jQuery(this).val(""); }' onblur='if(jQuery(this).val().replace(" ", "") == "") { jQuery(this).val("Other"); }'  />
</li>

And the CSS, which hides the text input by default but displays it when the "other" radio button is selected:

.gfield_radio li input[type="text"] { display:none; }
.gfield_radio li input:checked + label + input[type="text"] { display:block; }

The CSS went into my custom theme and the filter to change the HTML is:

add_filter('gform_tabindex', function($tabindex, $form) {
    return false;
}, 10, 2);

It would be nice if Gravity Forms would get with the times and set everything in a <fieldset> like it's supposed to, but at least with these changes, the "other" radio button is now keyboard accessible.

---

Related Topics