Home/ Questions/Q 6202477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:44:31+00:00

I’m making an input that looks like this: There are many different ways to

  • 0

I’m making an input that looks like this:
enter image description here

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0