Daniel Cobo | 👨‍💻 Full-stack developer |🍦Vanilla code advocate

Use custom CSS for image input

UpdatedApril 17, 2021

•2 min read•View as Markdown

Daniel Cobo

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Bulletproof type checks in JavaScript

Using typeof To check what type is a variable you would most likely use the typeof function. You can even skip the parenthesis (typeof someVariable is same as typeof(someVariable)). typeof works great for: strings numbers (not if checking integer vs...

May 17, 20213 min read

Get the first and last moment of a day in Javascript

Here are 2 ready-to-use functions to get the first and last millisecond of a day using a few lines of vanilla JavaScript. Get the first moment of a day /** * Get first millisecond of a date * @param {Date} dateObj - JS Date object, default is curre...

May 10, 20212 min read

Get the first and last moment of a day in Javascript

Check if the user is from EU with JavaScript

Obviously your best guess is to ask the user. That being said, we generally want to avoid interrupting the user. Websites and apps are (or at least should be) about what the user's needs not ours. That being said, given the many legislation requirem...

May 3, 20213 min read

Check if the user is from EU with JavaScript

Get user's preferred languages with JavaScript

Skip to solution If you have different language settings in your website or application wouldn't it be great if you could automatically set the language the user prefers? Doing so may be easer than you think. All you have to do is use navigator.langu...

Apr 26, 20211 min read

Get user's preferred languages with JavaScript

Get location by IP with JavaScript

Skip to solution. Problem Knowing your customer location can help you tailor their experience. Other times you may want to check for this information to compile statistics or comply with regulations. What's the best way to get location data? One way...

Apr 19, 20214 min read

Daniel Cobo | 👨‍💻 Full-stack developer |🍦Vanilla code advocate

6 posts

Problem

HTML supports image input and on mobile it will even do all the heavy lifting for the Camera API for you, providing a nice native experience. Here's what it looks like:

But let's be honest, the design sucks. Why?

It's too basic and kinda ugly (yes, tastes differ, but really? you like this?)

It's wildly inconsistent across web browsers and operating systems.

You can't style it with CSS.

I'd be OK if you could just add your own CSS, but it will only let you style the "box". The button, the message, etc. are all untouchable by CSS. It would have been so much better if they just let you manipulate those via pseudo-elements .

Next steps

The solution isn't perfect, but you can solve both drawbacks mentioned below with some JavaScript. If you have an interesting implementation or even better, if you came up with fixes that don't require JS, don't be shy and drop me a line.

Make it keyboard accessible

Adding tabindex="0" to the label element will make it tab-bable, but pressing ENTER/SPACE doesn't activate it. What you could do is add a JS listener for the keypress. This defeats the purpose which is a CSS only solution.

However, if we were to use JS anyway we might as well be more semantic. Keep in mind clicking this control will activate the hidden input, so using a button would be much more semantic than a label element.

Add visual feedback for input value

Often it is useful to see if/which image is in the input. The HTML solution is to provide you with a filename or text saying that the value is empty.

Again, we could solve this with some JS and listen to the value change. In this case I would also consider adding an image preview and a button to reset the input (set value to none). Using the built-in HTML input you can reset the input value too, but it's done in such an unintuitive way, doing a JS powered redesign is the way to go.

Command Palette