Databases
StackOverflow2013
Postsdbo
POText inside of a radio button
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POText inside of a radio button
    primarykey
    data
    text
    <p>I'm making an input that looks like this:<br/> <img src="https://i.stack.imgur.com/gVwHN.gif" alt="enter image description here"></p> <p>There are many different ways to approach making such an input, but I am trying to do it with as little javascript as possible.</p> <p>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.</p> <p>I'm looking for a way to imitate the look of a gridded response without using too much javascript/jquery/crazy css. Any suggestions?</p> <hr> <p><b>Just to clarify:</b> </p> <ul> <li>I'm not looking for someone to code up the entire input.</li> <li>I know I need to use javascript/jquery/css, but I'm looking for something more elegant than a javascript/jquery only solution.</li> <li><b>Cross browser compatibility is essential</b> </li> </ul> <hr> <p><b>Postmortem:</b> 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) <br/> <br/> Here is what I eventually did HTML/CSS wise.<br/> Used the label as the selector and have JS change the background-color:</p> <pre><code>&lt;div style=margin-bottom:5px;&gt; &lt;div style=float:left;&gt; &lt;input type=radio name=answer value=awesome id=answer style=display:none;&gt; &lt;/div&gt; &lt;label style=float:left;background-color:red;background-image:url("/assets/images/radio_circle.png"); for=answer&gt; &lt;div style=width:20px;height:20px;text-align:center;vertical-align:middle;&gt; 1 &lt;/div&gt; &lt;/label&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USafuzzyllama
    1. USafuzzyllama
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POText inside of a radio button
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POText inside of a radio button
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POText inside of a radio button
      1. This table or related slice is empty.
      1. VTUpMod
    1. COTo be honest, I can't think of a way to accomplish 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)?
      singulars
      1. POText inside of a radio button
      1. USwaffle paradox
    2. CO@ 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.
      singulars
      1. POText inside of a radio button
      1. USafuzzyllama
    3. COuse css3 rounded corners to make a circle?
      singulars
      1. POText inside of a radio button
      1. USDavid Nguyen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload