Adding text fo a file input using CSS Grid

I've been playing with CSS grid, listening to some podcasts and running through a few courses/tutorials.

One of the things that struck me as really useful is the ability to overlay elements on top of each other without using absolute positioning. I seee that this could be particularly useful when you want to have styled content display as part of a file upload process. Using CSS Grid you can have CSS stylable text visible and user selectable text that when clicked on opens a file dialogue.

As you can see in the below CodePen I've simply made a div with a 1:1 grid to act as the container. Into this container I have placed a div with my desired text followed by a input element of type file.
I've then styled these two elements to place them both in the first column of the first row.
This places the second element over the first (the input over the div).
I've then set the opacity on the input to 0 so all the user sees in the div.

See the Pen Text on a file upload using CSS Grid by Klee Thomas (@kleeut) on CodePen.

A caveat on this post. I'm still learning about front end web development. What I have shown here is a way that I have been able to achieve this. There may well be better ways to some definition of better.  If there is, or there is a way that I should improve on what is here I'd love to hear from you.


  1. That is extremely fascinating blog. you are an exceptionally talented blogger. Thanks for sharing this useful post. Get more CFA Audit | CA Firms | Warehouse Audit

  2. Great Post! Thank you such a great amount for sharing. This pretty post, it was so great to peruse and helpful to enhance my insight as refreshed one, Keep in blogging... Duplicate Payment Audit
    Duplicate Invoice Audit
    Fraud Prevention


Post a Comment

Popular posts from this blog

Solving `Empty reply from server` in DotNet Core

Testing functions that use local storage with Jest

Can't resolve DNS Aws