Zac Fukuda

Download Browser’s Form Element Design in XD & AI
The first step to UI/UX Design

Sometimes we want to use browser’s default form elements in our design. So I made them in Adobe XD and Illustrator so that you don’t have to.


Download (2.5MB)

The zip file contains the following files:

  • form-elements.xd
  • form-elements.html


The design of form elements for each browser looks like this:



  • I tried to copy the original design as much as possible. Please be aware that the design is not the exact copies. The design is based on the bitmap screenshots and values attained from the developer tools of each browser.

  • In browser, when one form element is disabled, it will be transparent with certain opacity. I personally prefer not to set opacity value, except for drop-shadow, since transparent elements result unexpected color when the background is other than white. So, instead of tinkering opacity, I set solid colors even for the disabled elements.

  • For Safari and Firefox, Apple’s original font SF Pro is used. By default, even on Mac, this font is not available for text-font selection in applications. You have to download the font at the below link and manually install them to use.

    Download SF Pro

  • Many objects are not grouped into. Be careful when you move them. Some objects can be left behind.

Further Reading

MDN’s collective articles Web forms — Working with user data shows you thorough mechanism of web form elements.