javascript - Text inside of a radio button - Stack Overflow

admin管理员组

文章数量:1279147

I'm making an input that looks like this:

There are many different ways to approach making such an input, but I am trying to do it with as little javascript as possible.

The fill-ins for a gridded response look much like a radio button EXCEPT they have their labels on the inside of the button. Unfortunately, the traditional radio button just won't do.

I'm looking for a way to imitate the look of a gridded response without using too much javascript/jquery/crazy css. Any suggestions?

---

Just to clarify:

• I'm not looking for someone to code up the entire input.
• I know I need to use javascript/jquery/css, but I'm looking for something more elegant than a javascript/jquery only solution.
• Cross browser patibility is essential

---

Postmortem: I picked the answer that I did because it incorporated everything I wanted. To readers of this answer, it doesn't work well in IE7. I decided to go with sprites in the end, but position the label was a good idea and might work in IE8/9 (I'm on a mac and I don't have VMs for them at the moment)

Here is what I eventually did HTML/CSS wise.
Used the label as the selector and have JS change the background-color:

<div style=margin-bottom:5px;>
    <div style=float:left;>
        <input type=radio name=answer value=awesome id=answer style=display:none;>
    </div>
    <label style=float:left;background-color:red;background-image:url("/assets/images/radio_circle.png"); for=answer>
        <div style=width:20px;height:20px;text-align:center;vertical-align:middle;>
            1
        </div>
    </label>
</div>

I'm making an input that looks like this:

There are many different ways to approach making such an input, but I am trying to do it with as little javascript as possible.

The fill-ins for a gridded response look much like a radio button EXCEPT they have their labels on the inside of the button. Unfortunately, the traditional radio button just won't do.

I'm looking for a way to imitate the look of a gridded response without using too much javascript/jquery/crazy css. Any suggestions?

---

Just to clarify:

• I'm not looking for someone to code up the entire input.
• I know I need to use javascript/jquery/css, but I'm looking for something more elegant than a javascript/jquery only solution.
• Cross browser patibility is essential

---

Postmortem: I picked the answer that I did because it incorporated everything I wanted. To readers of this answer, it doesn't work well in IE7. I decided to go with sprites in the end, but position the label was a good idea and might work in IE8/9 (I'm on a mac and I don't have VMs for them at the moment)

Here is what I eventually did HTML/CSS wise.
Used the label as the selector and have JS change the background-color:

<div style=margin-bottom:5px;>
    <div style=float:left;>
        <input type=radio name=answer value=awesome id=answer style=display:none;>
    </div>
    <label style=float:left;background-color:red;background-image:url("/assets/images/radio_circle.png"); for=answer>
        <div style=width:20px;height:20px;text-align:center;vertical-align:middle;>
            1
        </div>
    </label>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 31, 2015 at 13:52 afuzzyllama asked Jul 26, 2011 at 20:45 afuzzyllamaafuzzyllama 6,54855 gold badges4949 silver badges6464 bronze badges 8

• To be honest, I can't think of a way to acplish this without javascript/css, there's no real html facility for "text inside radio button." Is there any particular reason for your aversion to jQuery (et. al)? – waffle paradox Commented Jul 26, 2011 at 20:48
• @ waffle paradox - I'm not against using javascript/jquery/css, I'm just looking for something more light weight than what I am thinking right now. – afuzzyllama Commented Jul 26, 2011 at 20:49
• use css3 rounded corners to make a circle? – David Nguyen Commented Jul 26, 2011 at 20:53
• if you wrap text inside radio button, then how do u select that button?? – xkeshav Commented Jul 26, 2011 at 20:54
• @David Nguyen - how good is css3 with IE? – afuzzyllama Commented Jul 26, 2011 at 20:56

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 5

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

http://jsfiddle/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;
}

Why not use css? Here's one that uses jQuery and CSS...

http://jsfiddle/TrowthePlow/dGxAN/2/

Since it is a preset style of button(being a radio button I'm pretty sure the OS or browser sets the default size when coded with html) I'm pretty sure you won't be able to put text inside of a radio button using html and css working in conjunction. That said I went looking for buttons that would do what you want. Naturally Google and such returned a lot of results to do it via various methods but all involved a programming languages other than html and css alone.

The best thing I found was this jQuery and Css button styling system. JQuery will acplish what you want out of the buttons and the css will leave you with the ability to give them a nice custom look.

The full code as to how to create the frame work for the buttons is on the page, naturally you'll have to modify it get it to be the way you want, but this will hopefully get you started.

本文标签： javascriptText inside of a radio buttonStack Overflow