Member Avatar for artee

In my asp page, I have a number of checkboxes and radio buttons. It works fine, but the users want to have a larger checkbox and radio button. So I have a class in the stylesheet called "bigcheck". The style sheet has this class as
.bigcheck { height: 30px; width: 30px; }

The sample code in the ASP page is as below

<td class="TBorder" onClick="chk1();">     <INPUT class="bigcheck" id=HS11 type=checkbox value=1 name=HS11> </INPUT> </td>
 
      <td> <INPUT class="bigcheck" id=HSR1 type=radio value=0 name=HSR1 > <br>0 </td>

This works fine with Internet Explorer (i.e. the checkbox and radio buttons are a larger size), however it does not work in FireFox. Can someone please tell me what I am doing wrong?

Thanks
- Artee

  • 3 Contributors
  • 7 Replies
  • 129 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by artee

Dani AI

Generated

Back in 2007 Firefox ignored width/height on native checkboxes and radios (so your .bigcheck { height:30px; width:30px } had no effect). That is why was correct at the time. Today there are three practical, accessible options: 1) scale the native control with transform, 2) keep the native input but draw a custom control with label::before and input:checked rules, or 3) use an image/button toggle as suggested for a fully custom look. Prefer solutions that keep the real input in the DOM so keyboard and screen‑reader users still get native behavior.

Quick approach — scale the native control:

input[type="checkbox"],
input[type="radio"] {
  transform: scale(1.6);
  transform-origin: 0 0;
  margin: 4px;
}

Pros: very simple and keeps semantics. Caveats: transforms don’t change document flow, so adjust spacing and test on all target browsers.

Preferred robust approach — visually replace but keep the input:

/* keep native input accessible but visually hidden */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* draw a custom box on the label */
label.custom::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #666;
  margin-right: 8px;
}

/* reflect checked state */
input[type="checkbox"]:checked + label.custom::before {
  background: #007acc;
}

Notes: do not use display:none on the input (that removes keyboard/screen-reader access). Use id/for or wrap the input in the label so clicking and keyboard toggles still work. Provide a visible focus style via input:focus + label::before or :focus-within.

Extra tips: test with Tab/Space, test with a screen reader, and fallback to native controls for very old browsers. For simple color changes, accent-color can style the native checkmark without full replacement (see MDN). For implementation details and accessibility guidance, see and accent-color.

Recommended Answers

All 7 Replies

Member Avatar for autocrat

To be honest... I didn't thik it was possible to alter certain form elements.

By applying font-size/line-height, you can alter the size of Text-inupts etc... but things like checkboxes I believe are "standard only" in compliant browsers.
(Will double check and get back to you on that though!)

For the mean time, if you make it a bit more accessible, it means people can click on the label for the checkbox/radio button and get the same result as clicking the "box".

Member Avatar for autocrat

Okay... after a quickscout around...

It is not possible (apparently).

That said... you do have alternatives;

If keepig it as Checkbox/Radial is important, then you may need to re-order the form code so that clickig the vlaue label will act the same as clicking the item (being the heckbox/radial).

Following the above, you can apply a visual marker to indicate the active area's, (so for the value label, apply a class and either add a subtle border or apply a background-colour).

An alternative approach isto replace the Checkbox/radial with a dropdown list. For Checkboxes you can apply multi-select, for the Radial a single option only is equal.
Though visually different, these will have exactly the same results.

Member Avatar for MidiMagic

I have used a button, and changed the contents of the button itself.

You could put a huge checkbox image on a button.

Member Avatar for artee

Thanks for your suggestions Autocrat and Midimagic.

Midimagic,
Do you mean that instead of using checkbox and radio buttons, you create images and use them instead?
- Artee

I have used a button, and changed the contents of the button itself.

You could put a huge checkbox image on a button.

Member Avatar for MidiMagic

I have done it several ways. The easiest is:

Put an image on an input button as a background. Keep a toggle variable on the button, and change the image on the button to match the toggle.

You can remove the border, so it no longer looks like a button.

Member Avatar for autocrat

To be honest, after much looking around, MidiMagic's method is the only way to make it look like a bigger checkbox/radial.

The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.

But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).

I'd go with MidiMagic if I was you :)

Member Avatar for artee

Thanks Midimagic, I shall work on your method
- Artee

To be honest, after much looking around, MidiMagic's method is the only way to make it look like a bigger checkbox/radial.

The only alternative is to style the labels and make them "clickable" and moe "visible", enabling people to click the label.
I have tested having <label for="n">Name <input /> </label>... it seems to validate and work in IE6 and Mozilla 1.5/2 for Win... which means you can style the label to be bigger, and it will encompas the input as well.

But it will not make the inputs bigger, nor make them appear bigger.
Not possible in non-ie browsers (one of the few of their "quirks" that is a good feature!).

I'd go with MidiMagic if I was you :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.