Is there a way to make the select area for a radio button bigger?

Answer 1

Ironically I had the same problem and this small piece of css saved me when I was dealing with a free format table (class nice) with alot of radio buttons. Seems its browser dependant what the result will look like. Chrome and Firefox expand the activation area for a radio button, whereas (old) versions of IE could scale the radio button itself to given dimension:

.nice input {width:30px;height:30px}


Suppose you can also check object's css with javascript, so there is no mandatory need for a free format question here

--
CSI

Comments

CSI –
I’m not familiar enough with CSS’s and classes to get .nice input to work.  I’m going to look through the w3school tutorial and learn more about CSS.

Paul –
I used the one of the buttons from Sawtooth library.  Now I will play around with the size of the graphic.

Thanks to the both of you!
Greg

---

Hey sorry for the late reply

You dont have to go with graphics necessarily. You can put this piece of css code into the html head of the page where you want this effect to apply:

<style type="text/css">
<!--
input[type=checkbox] {width:30px;height:30px}
input[type=radio] {width:30px;height:30px}
-->
</style>

if you dont want the effect for radio buttons, simply remove the corresponding line. Also set the height and width as you wish, keep in mind this can have effect on line height/length

---

Thanks!  This is what I was looking for and now the client is happy!

---

Hello,

I tried this code, its working good on chrome but not working on IE.

Thanks.

Answer 2

Sawtooth have a suitable library of unchecked and checked radio buttons and check boxes. The same can be said for the navigation buttons too. You could possibly modify these using a graphics package to a desirable size but I'm not sure of the quality as you go larger? These can be found under the survey settings - click on the general format tab.

You can create your own radio buttons and check boxes and make them any size you want. You will need a checked and unchecked version. Add them to the existing Sawtooth library.

With regards to increasing the size of the clickable area or select area, I'd suggest JavaScript will be able to do that but I only have basic skills in this area.