997200 - Create a :-moz-appearance(value) pseudo class

Status: RESOLVED WONTFIX

(Core :: CSS Parsing and Computation, defect)

Description

[Tim Nguyen :ntim]

It'd be nice to be able to select elements with a specific -moz-appearance value.

It would make a lot of things much easier :

Hide the select button with -moz-appearance: none in forms.css :

select > input[type="button"]:-moz-appearance(none) {
  display:none
}

Hide the number spinner with any non-default -moz-appearance value :

input[type="number"]:not(:-moz-appearance:number-input)::-moz-number-spinner {
  display: none;
}

Comment 1

[Tim Nguyen :ntim]

What do you think David ?

Comment 2

[Boris Zbarsky [:bzbarsky]]

> It'd be nice to be able to select elements with a specific -moz-appearance value.

The problem is that the rule with that selector can then change the -moz-appearance value, no?  This is a general problem with all proposals that suggest selecting on CSS property values...

Comment 3

[Tim Nguyen :ntim]

(In reply to Boris Zbarsky [:bz] from comment #2)
> > It'd be nice to be able to select elements with a specific -moz-appearance value.
> 
> The problem is that the rule with that selector can then change the
> -moz-appearance value, no?  This is a general problem with all proposals
> that suggest selecting on CSS property values...

Good point, well, I guess the -moz-appearance property would be ignored inside a :-moz-appearance() rule.

Comment 4

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

I don't see why you'd actually want to do either of the things in comment 0.

Further, there's the point that Boris made that we generally don't have selectors that depend on properties.  If there's a strong need for something like that we can add concepts like dependency-avoidance per comment 3, but I don't actually see why you want the things in comment 0 in the first place.

Comment 5

[Tim Nguyen :ntim]

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-7) from comment #4)
> I don't see why you'd actually want to do either of the things in comment 0.
Many people requested to be able to fully style the select box with -moz-appearance:none (which also means replacing the select arrow).
For the number spinner, we already do this with C++ code.

> Further, there's the point that Boris made that we generally don't have
> selectors that depend on properties.  If there's a strong need for something
> like that we can add concepts like dependency-avoidance per comment 3, but I
> don't actually see why you want the things in comment 0 in the first place.

Well, we need this to replace the inner focus outline in unstyled state with the new blue focus border in bug 997190. Is there another way to do this ?

Comment 6

[Tim Nguyen :ntim]

Also in bug 997190, we need to fully restyle the select boxes when -moz-appearance:none; is used.

Comment 7

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Ah, so you're talking about styling the input based on whether the select that contains it has appearance:none rather than based on whether the input itself has appearance:none (as you wrote in comment 0).

Still need to think about the other question.

Comment 8

[Tim Nguyen :ntim]

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-7) from comment #7)
> Ah, so you're talking about styling the input based on whether the select
> that contains it has appearance:none rather than based on whether the input
> itself has appearance:none (as you wrote in comment 0).
Whoops, yes.

Comment 9

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

(Which is part of why it's best to request features by saying what you're trying to do, not by offering syntax that you think would do what you want.)

Comment 10

[Tim Nguyen :ntim]

(In reply to David Baron [:dbaron] (needinfo? me) (UTC-7) from comment #9)
> (Which is part of why it's best to request features by saying what you're
> trying to do, not by offering syntax that you think would do what you want.)

Detecting if the element is currently using the native styling or not.
:-moz-native might be a good choice too.

But that still brings up the issue that Boris mentioned.

Comment 11

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

But the reason you want to do *that* is to do comment 5, which doesn't have to be done in CSS, and probably shouldn't be.