If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

<input type="file"> ignore border style

RESOLVED FIXED

Status

()

Core
Layout: Form Controls
RESOLVED FIXED
13 years ago
4 years ago

People

(Reporter: osavill, Assigned: mounir)

Tracking

({testcase})

Trunk
testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [fixed by bug 52500], URL)

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a3) Gecko/20040729 Firebird/0.8.0+
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a3) Gecko/20040729 Firebird/0.8.0+

The above URL has a <select...> and an <input type="file"...>. The CSS for each
is defined as:
input { width: 100%; height: 1.3em; border-style: solid; border-color: #bacae1;
border-width: 1px; color: #19519d;  font-size: 0.7em; font-family: arial,
helvetica, sans-serif;  }

select { width: 100%; border-style: solid; border-color: #bacae1; border-width:
1px; color: #19519d;  font-size: 0.7em; font-family: arial, helvetica,
sans-serif;  }

I don't know quite when this happened but neither of the above two HTML elements
apply these attributes any more. IE and Netscape 6 does apply them (IE arguably
better than Netscape 6 because the style is applied to the input area ad the
Browse button, whereas Netscape 6 simply puts the border around both elements
which are in turn rendered with no style attributes !!!)

Reproducible: Always
Steps to Reproduce:
1.
2.
3.



Expected Results:  
The Border style should be applied to all <input> and <select> elements.
Created attachment 154781 [details]
Testcase

Border-color seems to work for me for both (see also bug 53590), using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a3) Gecko/20040728
Firefox/0.9.1+

But border-style and border-width don't work. I don't think they ever worked.
For select, see bug 94387.  That behavior is exactly as we want it.

For <input type="file"> the "border-style: none !important" was added in bug
106317 and I'm not quite sure why...  fantasai, what was the reason?  It may be
worth commenting in the file.
(Reporter)

Comment 3

13 years ago
> For select, see bug 94387.  That behavior is exactly as we want it.

Last comment from Issue "verified www.juno.com page has changed. bug is now
invalid." !!! The issue wasn't resolved since the problem item just disappeared
from the page. If you look back at the Netscape 6 era builds you'll find that
Mozilla / Netscape applied the border attributes correctly to <select>.

Comments within Issue 94387 also discuss the fact that the CSS spec. does not
cover borders for form fields. But having borders applied for some form fields
(input fields and buttons) and not others (select drop downs and file browse) is
a little inconsistent. Moreover, the whole effect is very pleasing in IE and
Opera but looks a little odd in the Mozilla family :-(

Could the !important be affecting other form fields also ?

Comment 4

13 years ago
The file input text field is inheriting the border color from the file input
element. The idea was to make the text input's border the conceptual file input
border, so the border around the file input itself is display: none;
(Reporter)

Comment 5

13 years ago
> The idea was to make the text input's border the conceptual file input
> border, so the border around the file input itself is display: none;
That's fine, except the file input box and it's Browse button actually have
large bevelled borders that almost mask any CSS applied border. Moreover, by the
time the CSS applied border is large enough to be properly seen the whole effect
just looks very strange. The most pleasing solution, sadly, is IE's where they
have default bevelled borders unless CSS defines one, in which case it is used
instead.

What about <selects> ? Should I raise a separate issue for this ?
> What about <selects> ? Should I raise a separate issue for this ?

You did read bug 94387, right?

border-style is ignored on almost all form controls, in fact, not just <select>.
(Reporter)

Comment 7

13 years ago
From 94387:

Let's put in !important for now and fix the entire stylable of form controls 
thing later.

and:

Note that form controls should be styleable via userContent.css, and this change
braeks that.

and:

hmmm..... http://www.juno.com have made changes to their page. There is 
no pulldown on the top right ("Explore by Category") anymore.
...
verified www.juno.com page has changed. bug is now invalid.

Was the "entire stylable of form controls thing" ever really addressed ? 

Just because juno.com don't display these controls doesn't mean the bug is now
invalid !

> border-style is ignored on almost all form controls, in fact, not just
> <select>
Why ? 
Almost is inconsistent.
I now know that apparently the standards don't refer to these directly but then
I guess most shot gun hand books don't say "Congratulations on purchasing your
new shot gun. Don't shoot any one with it." either !!! :-)
Why, since NS6 went more than half way by applying border styles to <select>s
and giving browse controls an overall border, was this removed rather than
continuing as was or by giving the browse control a nicer border also. Or does
this come full circle back to "entire stylable of form controls thing" ?

I don't want this to turn into a battle of wills. If you really don't want this
issue fixed that's fine. I am just trying to help Mozilla / Fire Fox be the best
out there, and turning a nice graphically designed page into a cludge is not the
best way to do it !! :-O
> I now know that apparently the standards don't refer to these directly

Huh?  That's not true.  Here is the exact language (from
http://www.w3.org/TR/CSS21/conform.html ):

  CSS2.1 does not define which properties apply to form controls and frames, or
  how CSS can be used to style them. User agents may apply CSS properties to
  these elements. Authors are recommended to treat such support as experimental.
  A future level of CSS may specify this further.

To use your shotgun analogy, the manual says "If you point the gun at someone
and pull the trigger, it may or may not kill them."  Then you complain when you
do just that and the man isn't actually killed.

As for the Juno page, there were other sites showing the problem as well; it
wasn't just Juno.

Finally, given that CSS does not define how things should work, any work put
into making them work a given way is going to be wasted if a different way is
specified in the end.  If you find someone with the extra time on their hands to
do work that's likely going to have to be redone, feel free to try and talk them
into dealing with styling of form controls.

Comment 9

13 years ago
Created attachment 158388 [details] [diff] [review]
patch to re-enable styling of select borders

Comment 10

13 years ago
Just created a patch to re-enable select border styles.  it took about two
minutes. I used the forms.css that comes with firefox.  not sure what version
(as in cvs file version of the forms.ccs file).

I like pretty borders on select elements.  Screw whatever IE does.
Depends on: 244370
Changing Summary since bug 244370 fixed the <select> part.
Summary: <select> and <input type="file"> ignore border style → <input type="file"> ignore border style

Updated

13 years ago
Attachment #158388 - Attachment is obsolete: true

Updated

13 years ago
Keywords: testcase
DUP of Bug 52500?
Assignee: dbaron → nobody
QA Contact: ian → style-system
No.  Let's keep one bug per issue instead of dupping to tracker bugs, ok?
Depends on: 52500

Updated

8 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Linux → All
Hardware: x86 → All
(Assignee)

Updated

5 years ago
Duplicate of this bug: 857409
(Assignee)

Updated

4 years ago
Assignee: nobody → mounir
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Component: CSS Parsing and Computation → Layout: Form Controls
Resolution: --- → FIXED
Whiteboard: [fixed by bug 52500]
You need to log in before you can comment on or make changes to this bug.