cannot style radio buttons

RESOLVED INVALID

Status

()

Core
Widget: Gtk
RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: Jonathan Baron, Unassigned)

Tracking

Trunk
x86
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

11 years ago
Until about June 6, 2007, I could style a radio button, e.g.,
input.radio {width: 1.2em; height: 1.2em; background: white;}
and this would work.  Now nothing works, neither the size nor
the background.

Updated

11 years ago
Blocks: 329846
Component: General → Widget: Gtk
Product: Firefox → Core
QA Contact: general → gtk

Comment 1

11 years ago
IsWidgetStyled must be lying... do you see this on Mac OS X?

Comment 2

11 years ago
Even worse:

http://mxr.mozilla.org/seamonkey/source/widget/src/xpwidgets/nsNativeTheme.cpp#263
 263       default:
 264         NS_ERROR("nsNativeTheme::IsWidgetStyled widget type not handled");
 265         return PR_FALSE;
 266       }

Checkboxes and radiobuttons aren't handled at all, so its a problem on all platforms. Not caused by bug 329846, rather an incomplete function.
No longer blocks: 329846
(Reporter)

Comment 3

11 years ago
I've made a little test page at
http://www.sas.upenn.edu/~baron/formtest.htm
The problem seems limited to the size of radio buttons and checkboxes.  As these elements are often too small for (e.g.) older people, I think this is an important bug.

Comment 4

11 years ago
I was just trying to do this in Stylish and / or Greasemonkey.
The only thing I could get to work so far is margin-left / margin-right...
input[type="radio"][checked] { margin-left: 1em }

I just needed some indication of which item was checked because my script changes the checked item. It's cool the pseudo :checked works (it's dynamic), though what can you really do with it? Need color or border or content :before / :after.
I remember using span tags in NC4...

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071128 SeaMonkey/1.1.7
(Reporter)

Comment 5

11 years ago
I think this is not a bug because it is not in the style specification.
You can use <label> </label>, which will allow the user to click on the label next to the button, thus avoiding the problem of buttons that are too small. For example, you can style label like this:

label:hover {background-color: yellow}

and then make buttons like this:

<label><input type="radio" name="some name" value="some value">some text</label>

and then the text is highlighted when you move over it and clicking on it sets the button.

Thus I'm going to (try to) change this to "invalid".
Status: NEW → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → INVALID

Comment 6

11 years ago
That doesn't make any sense at all.
first of all, LABEL is for linking text labels to form elements, it's not for applying styles to form elements. You don't use a label around the input if it is in a different column than the text label - the label doesn't need to be a ancestor of the input element.
So we can use SPAN, well that's fine as long as the input element inherits properly.

But explain to me what the use is for :checked if styles don't apply to radios and checkboxes. Using SPAN or LABEL isn't going to make any difference.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#pseudo-classes

The :checked pseudo-class
Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies.

(Reporter)

Comment 7

11 years ago
Sorry for not being clear.  The original reason for my WANTING to style radio buttons was to make them easier to use.  It was not being able to change their size that bothered me.  The use of <label> is another solution to this problem.  In my view, it is a better solution.  There may be other solutions.  But I also believe that styling of the width of radio buttons is not required by the CSS specification and is not implemented in other browsers, so there is in fact no pressure to change this.  

Thus, I think that my initial report of this bug was incorrect.  (See the very first entry of this bug report.)  It isn't a bug.  It was a feature that Mozilla implemented for a while and then withdrew.

I think you are talking about something else, and you should file another bug.  I don't understand your problem, actually, but don't try to explain it here.

Comment 8

11 years ago
I didn't notice you were the reporter.
The problem is that you "cannot style radio buttons", the name of this bug (Now nothing works).
Your solution is the correct one for your problem, but it doesn't fix the bug or make it invalid. But it is your report so you can do what you want, and I'll just have to file a new one saying nearly the same thing, though I should be more specific.

Comment 9

11 years ago
(In reply to comment #7)
  
> But I also believe that styling of the width of radio buttons is not required by the CSS specification

Correct
See the last paragraph under CSS2.1 3.2
http://www.w3.org/TR/CSS21/conform.html#conformance

> and is not implemented in other browsers, so there is in fact
> no pressure to change this.  
> 
> Thus, I think that my initial report of this bug was incorrect.  (See the very
> first entry of this bug report.)  It isn't a bug.  It was a feature that
> Mozilla implemented for a while and then withdrew.

The reason (at least OS X and Linux, afaik) that some properties don't apply by default is that native - aka themed - radio buttons and checkboxes can't be resized (width/height). They have a fixed size by OS HIG, or at best a 'small' and 'larger' size.

If you want to resize those controls, use '-moz-appearance:none'. They will then use the old gfx style.
input[type="checkbox"] {-moz-appearance:none; width 2em; height:2em;}
results in a 2em by 2em square gfx box that on my OS at least (OS X) doesn't look like a checkbox at all.

Comment 10

11 years ago
I don't think I'll file a bug on this after all. After reading the above reply, and doing some more testing, it seems that style is dependent on platform and element type.
On my version of SeaMonkey Win32
width and height do work on radios.
'-moz-appearance: none' has some effect - it removes the outline.
color and background-color and border have no effect on radios, no matter what I try, but they effect other inputs like text and buttons.

My solution was this...
input[type="radio"][checked] { outline: red dashed 1px }
which indicates the default checked item.

The behavior seems inconsistent, but so long as something works I don't have an issue at this time.
You need to log in before you can comment on or make changes to this bug.