Member Avatar for OmniX

When using this HTML code:

You get a rectangle where the location is stored, and a button labelled "Browse..".

I would like to redesign the "Browse.." button and I was told this would have to be done using mainly javascript and abit of css (I thought it would be the other way around only abit of javascript and alot of css - which im prefering).

So any ideas how to redesign the "Browse.." button?

Note: The file is a php file which contains various input type="submit", etc.

Thanks, Regards X

  • 5 Contributors
  • 6 Replies
  • 622 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by jstnjns

Dani AI

Generated

A modern, low-JS solution: style the actual file button with the ::file-selector-button pseudo‑element and only use small JS to show the chosen filename. That gives you a true CSS-first design (what you wanted) without brittle opacity/overlay hacks. Note: the pseudo‑element only controls the button itself — you still can’t style the “no file chosen / filename” text the same way because parts of the control live in the UA/shadow DOM. ()

Example (concise):

<input id="fileUpload" type="file" class="file-input" aria-describedby="fileName" />
<span id="fileName">No file chosen</span>
.file-input::file-selector-button {
  padding: .4rem .8rem;
  background:#0b6ef6;
  color:#fff;
  border:0;
  border-radius:4px;
  cursor:pointer;
}

/* vendor fallbacks for older engines */
.file-input::-webkit-file-upload-button { /* same styles */ }
.file-input::-ms-browse { /* same styles */ }
const input = document.getElementById('fileUpload');
const out = document.getElementById('fileName');
input.addEventListener('change', () => {
  const name = input.files && input.files.length
    ? input.files[0].name
    : input.value.replace(/^.*[\\\/]/,''); // fallback
  out.textContent = name || 'No file chosen';
});

Use the File API to read files[0].name — browsers intentionally do not expose real local paths (you’ll often see C:\fakepath\…) for security, so rely on the filename, not the path. (developer.mozilla.org)

If you must support very old browsers, fall back to the label/hidden-input pattern (keep the input focusable and associated with a <label> so keyboard users and screen readers still work). Don’t remove the input from the accessibility tree (use a small “visually-hidden” technique instead of display:none) and test keyboard activation. For the label behavior and accessible patterns see the <label> guidance. (developer.mozilla.org)

Notes tied to earlier replies: and pointed to overlay hacks and JS wrappers — those still work, but start with ::file-selector-button first (less fragile) and add a tiny JS snippet to show the file name for a fully usable, mostly‑CSS solution.

Recommended Answers

All 6 Replies

Member Avatar for johnsquibb

The only way I know of is to use a workaround...This website has the best solution I've come across...Just follow the steps, and be sure to download the scripts he has written at the bottom of the page.

Member Avatar for OmniX

I know this is a problem that very vew people have figured out a way around, but the one you mentioned above dosent allow you to view the file you have uploaded (Eg. D:\Programs\hi.jpg).

Im just trying to figure out using some CSS and minor Javascript can maybe come up with something?

Thanks for the heads up in the right direction though.

Member Avatar for johnsquibb

a little bit of googling and I came across this one on quirksmode...this seems to be about the same approach as the previous, but with a textbox to show the chosen file...both of these solutions are merely browser 'workarounds', and since they use opacity, cross-browser compatibility can be difficult to achieve!
Let me know if you come across something better and/or hack out your own solution, as this has always been the bane of elegant form design...

http://www.quirksmode.org/dom/inputfile.html

Member Avatar for cpcos

Yep... nice thing... but these guys are hiding the real thing with javascript...
You don't need any javascript attached to you page for that thing to work :)).
here a quick example:
in the header a small stylesheet:

<style>
label.LabelHolder input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid : DXImageTransform.Microsoft.Alpha(opacity=0);
left:-152px;top:0px;
}

label.LabelHolder{
width: 79px;height: 22px;
background: url(YourGifImageButton.gif) no-repeat;
display: block;
overflow: hidden;
cursor: pointer;
}
</style>

Than a small form with 2 elements :

<form method='post' action='YourLocation.php' enctype='multipart/form-data'>
<label class='LabelHolder'>
<input type='file' class='file' name='UploadInput'>
</label>
</form>

And that's it!
when adding the relative path to YourGifImageButton.gif and of course have that image saved there everything works perfect!

those guys are hard codding into (label.LabelHolder) the relative position of file element to top:0;left:0 and then overwrite that via javascript with the right values:
original style (as seen in the site)

background: url(YourGifImageButton.gif) 0 0 no-repeat;

the result of javascript interraction:

<input type='file' class='file' name='UploadInput' style='left:-152px;top:0px;'>

So basically i took the javascript's "advice" and and put it in the stylesheet where it belongs (label.LabelHolder input.file);
The result is a nice looking upload button javascript free.
cheers,
cos

Edited by cpcos because: n/a
Member Avatar for jstnjns

I've built this jQuery plugin to make it much easier to style the file inputs:

It's based on the methods above, but much simpler to implement. Hope that helps!

Edited by jstnjns because: n/a
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.