2

This is another try to ask the same question I did this afternoon but the people didn't understand it and vote it negatively until its close.

First at all: I don't want to know howto solve the problem of the impossibility of to style the file input and select input html elements as others html elements. In fact I ALREADY know how solve it c&p:

I repeat that I already know howto workaround the problem. It isn't my question. Thanks for all your intentions but it wasn't required.

The question is simple:

Why we can't to style easily as other elements, in fact as all other html elements, file input or select input HTML elements? Which is the technical reason we prefer don't be able to style this elements?

We are not able to do it because is dangerous for the users? Because they could not to see where they are clicking? It is an accessibility problem? What is the reason that the standard prohibits do that?

If you can't understand the question so sorry. It is me. But don't vote negatively it as before.

PS: I don't want to know how to style file input and select input. Thanks

Community
  • 1
  • 1
José Cabo
  • 6,149
  • 3
  • 28
  • 39
  • 4
    If your last question was closed than do _not_ repost, but edit your previous question to make it good enough to reopen. – 11684 Feb 22 '13 at 20:03
  • 1
    You really need to read the first two [FAQ sections](http://stackoverflow.com/faq) to see why your question is being so rejected. It solicits matters of opinion to which there are not any hard answers. – ScottS Feb 22 '13 at 20:08
  • ScottS thanks for your answer but my question is "answerable". It isn't philosophic. It is technical. Ok, you can't answer with "then this and then this other". Anyway if you think my question isn't in the right place could you suggest me another? Thanks – José Cabo Feb 22 '13 at 20:12
  • possible duplicate of [Why we can't stylize select and input file html elements? - I don't want to know howto do it](http://stackoverflow.com/questions/15029463/why-we-cant-stylize-select-and-input-file-html-elements-i-dont-want-to-know) – Quentin Feb 22 '13 at 20:15
  • Quentin, It was my other question. I said it in the question. Scotts, in the faq said that *I can open a newer question if I do it "better"*. – José Cabo Feb 22 '13 at 20:18
  • 1
    My guess would be a combination of the element's look and feel not being standardized to begin with (it looks and behaves rather differently across different browsers) and it being a possible security issue (file uploads are always a very sensitive affair). I don't know if there can be a definite answer. It is how it is, we're here because of the legacy we have with that element. Part of it may be security superstition (correctly or not), another part inertia, another part disinterest. – deceze Feb 22 '13 at 20:19
  • deceze in the case of file input selection the security reason is broken since we do our workarounds (the users want to click in an element that in reality is the file input element but it is hidden). Don't you think it could be enough to allow style it? – José Cabo Feb 22 '13 at 20:23
  • Thanks for the close, thanks. The people is incredible. – José Cabo Feb 22 '13 at 20:25
  • As I said, the security angle may or may not be "real". A lack of standardization is probably just as much a contributing factor. Fact is, even if people would get together to form a standard on how to style that element using CSS, where to begin? First you'd need to define a common standard for how the thing should look. And then all browser vendors would need to get on board. That's where the inertia reason comes in... – deceze Feb 22 '13 at 20:25
  • deceze, good answer. So do you think the reason is a problem with the "behaviour" in system that aren't PC like smartphones? So probably we need something that says (an standard) howto will be managed this kind of behaviours. It what you said? – José Cabo Feb 22 '13 at 20:28
  • Form controls are basically boxes containing things we can see, but not touch. We can only style the box itself, not the *contents* of the box. If you want to know more, try searching for *shadow DOM*. – cimmanon Feb 22 '13 at 20:41
  • Just compare Safari file inputs to all other browsers. It stands out as very different. I wouldn't even know where to begin with a standardized set of rules to style it and all other file input elements together. It's not just about mobile. – deceze Feb 22 '13 at 20:47
  • 4
    @JoséCabo: FAQ states "ask practical, answerable questions based on actual problems ... Chatty, open-ended questions diminish the usefulness of our site." Your question is valid, but not valid _for a question on Stack Overflow_. Your discussion above with deceze proves the point. He states, "I don't know if there can be a definite answer" (Flag! Bad question.) He comments "may or may not"; you ask him "do you think the reason," which is just asking his opinion. A book might answer "why," but FAQ says, "If you can imagine an entire book that answers your question, you’re asking too much." – ScottS Feb 22 '13 at 21:03
  • @JoséCabo: Investigation seems to show that the [Programmers Exchange](http://programmers.stackexchange.com/faq?mnu=1) might be the best for theory and "why" questions. – ScottS Feb 22 '13 at 21:10
  • Thanks for your answer, mainly your deceze and mikerobertking (and others, of course). You and other users answer me correctly. Now I know that the problem is with our actual standard and it needs to embrace other kind of things like behaviours to be even better. With it maybe in the future we'll be able to style this kind of elements without so many *incentives*. Thanks for your answer and kisses for the *"incredible persons"* – José Cabo Feb 22 '13 at 21:10
  • Thanks ScottS for your answer. I will be more cautious asking next time. – José Cabo Feb 22 '13 at 21:13
  • 2
    You're basically asking for Shadow DOM. It is being worked on. Things like styling radio/checkbox inputs with pure CSS are now possible with `-(webkit|moz)-appearance:none` and setting your own styles, though that is not a standard yet. – Fabrício Matté Feb 22 '13 at 23:09
  • Thanks for the css new property Fabricio. It is cool. – José Cabo Feb 22 '13 at 23:26

2 Answers2

2

In the example of select elements, it is because generally operating system handles these issues because each platform has input methods outside of mouse operations. If you have a tablet, you want the select box to handle slightly different because of touch input.

In many cases, it is due accessibility settings. You never want to override accessibility settings. People with visual impairments may need assistive technologies; other users have physical impairments that make it hard, or impossible, to use standard pointing devices such as a mouse.

So some browser vendors made it impossible to handle styling those elements for that specific reason and completely rely on the operating system to tell the browser how to render the specific element. Though some of that is changing, especially in webkit.

Michael K.
  • 555
  • 2
  • 15
  • I don't think so. In fact workarounds we use to fix it are fully accessible but with "Style". What do you think? – José Cabo Feb 22 '13 at 20:16
  • You think so, but in my experience, it's really hard for developers to predict what other methods exist for input or displaying content. There are a number of guidelines in place. http://www.w3.org/TR/WCAG20/ – Michael K. Feb 22 '13 at 20:43
1

The technical reason is simply that the browser does not allow us to do this. The UI is provided by the host operating system.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • But why doesn't the browser let us style them? (That is how I read the question.) – 11684 Feb 22 '13 at 20:04
  • Well. We don't want to style the list of files of my computer. Just the button itself. The browser is independent of this so browsers only need to wait until anyone call file input, using the API (for example), and then open selectable file. – José Cabo Feb 22 '13 at 20:05
  • Thanks 11684. Thanks is exactly I want to know. – José Cabo Feb 22 '13 at 20:05
  • 1
    Probably because it could potentially be used to trick the user into opening a file upload box when they don't want to. – DiMono Feb 22 '13 at 20:07
  • Ok. But it only resolve the problem from an only javascript api. At this time we have **workarround** to style the file input as we want. – José Cabo Feb 22 '13 at 20:09