For the summer 2014 hackathon, we (the Tagged interns) decided to work on a project to improve the user experience for the “Add Photos” section of Tagged.
Originally, the buttons for uploading photos from your computer and adding images from URLs looked very different from each other, and they were a bit outdated in terms of design. Using modern HTML and CSS, we were able to give them a refreshed look. Also, the photo upload button was a plain HTML5 file upload button, which is implemented differently in different browsers. With the restyled button, users will get a consistent experience across all browsers.
“How to style an HTML5 file upload button?” is a question that has been asked many times in recent years. We decided to go with a simple, browser-friendly solution. We wrapped the upload button with a <label> element, then used CSS to hide the actual button and add the visual styles to the label.