Autocompletion with HTML5 datalists

We have all used (and most of us built) an autocomplete input element. There are thousands of plugins/widgets out there, although below I’m demonstrating the easiest, most semantic and HTML5 way to build it without using Javascript! Just put a normal input element and connect it with the new datalist element by using the list attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!

See the Pen Autocompletion with HTML5 datalists by John Tsevdos (@tsevdos) on CodePen

How to style a file input element in Firefox

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

Mobile media capture straight to your web form

So, you’ve just build your latest responsive web design masterpiece and you’re adding the final touches for the mobile viewport. Suddenly you discover a form where the user must submit a profile image (or video or audio) in order to continue. Wouldn’t it be nice to let the user use their phone in order to take a picture (or video or audio) with it, and at the same time keep the normal fall-back of the input file element for desktop browsers? Well you can, just use the below attributes on your input fields. Desktop browsers will use them as normal file inputs, while mobile devices will add this extra native flavour.

See the Pen Mobile media capture straight to your web form by John Tsevdos (@tsevdos) on CodePen

I tested them and they work on iPhone (both on mobile Safari and mobile Chrome), but they will (probably?) work on any mobile device/browser (android/windows etc.)… Let us know in the comments or via twitter if they work for you.

Remove rounded corners from input elements on mobile webkit browsers

Mobile Safari is probably the best browser solution for iOS devices. The browser offers many advanced features and some eye-candy form elements to interact with. These eye-candy form elements already have some default webkit-only styles and can make your life a bit harder if you want to style them differently. Anyway, cutting a long story short, if you don’t want input elements to have rounded corners, just use the CSS rule shown below:

See the Pen Remove rounded corners from input elements on mobile webkit browsers by John Tsevdos (@tsevdos) on CodePen

Safari’s HTML5 search input

The safest and easiest way to upgrade your markup to HTML5 is to use the new form input types. They will appear as ordinary text inputs on older browsers, and at the same time they’ll save you tons of work on form validation, and as a bonus they’ll assist your users in filling them (by providing more in-browser features, alternate keyboard layouts and more). This blog theme uses a search input to search the site.

<input id="s" name="s" type="search" />Check out this Pen!

It works great, but unfortunately, Safari’s default search input generates a close button (x) into the input field (while you type). Supposedly this will help the users to view recent search keywords, but if they they decide that they don’t need help, they can just click it and remove everything from list and the input field. I didn’t need this in-browser style for my search input, so after an investigation, I discovered the below solution.

input[type="search"] {
  -webkit-appearance: textfield;
}Check out this Pen!

This rule will transform your search input (with the strange close button) into a typical text field input that you can style properly.