nice-forms.css

I like pretty forms and clean HTML 😄 That's why I created nice-forms.css to help devs who want to hit the ground running, but don't want to stare at default input fields when doing so 💩

In a nutshell:

It provides a sensible input styling 'reset'
Get nice looking forms with zero effort
Easily customizable with css-variables
Perfect for rapid prototyping or tweak it and make it your own.
No hacks or unnecessary elements, pure semantics

Installation

Import nice-forms.css from unpkg
https://unpkg.com/nice-forms.css/nice-forms.css

Install via NPM
npm install nice-forms.css

Structure

All you need to do is add the class .nice-form-group to get a nice base style for all your input fields. Add a small element for additional information, this can be below the label or below the field.

Basic form group

Basic form group With additional information below the label

My form group label Or additional text below

Toggle code

Input types

All available input types are included

Text

Phonenumber

Url

Password

Disabled field

Toggle code

Checkbox and Radio

These are your basic input[type="radio"] and input[type="checkbox"] elements. They have a label and can contain secondary information by adding a small element inside the label.

Radio button with label

Radio button with label Radio can have additional information

Checkbox with label

Checkbox with label I am additional information regarding this field

Switch If you want a checkbox to look like a switch, just add a .switch class to the checkbox input element

Switch with label

Switch with label I am additional information regarding this field

Toggle code

Fieldset

The fieldset is used to group multiple related input fields. All nested .nice-form-group elements within will automaticly have a smaller margin.

Select your favorite framework

React

Vue

Angular

Select your favorite languages

CSS

HTML

Javascript

Toggle code

Icons

For some input types it could make sense to show a icon. These icons are hidden by default but can be added by adding either .icon-left or .icon-right to the input element. The icons used are from feathericons.

Phonenumber

Url

Password

Phonenumber

Url

Password

Toggle code

Field Validation

Fields that have a required attribute can be valid or invalid based on their value. When a user focuses on a invalid field the styling is set back to default.

Toggle code

Date input

Date fields show icons by default. The month, week and date fields have a fixed min width set at 14em. time is set at 7em.

Month

Week

Date

Time

Toggle code

Other input types

Textarea

Select

File upload

Range slider

Number

Color

Toggle code

Reset only

There is also a reset only version available, this version provides styled form fields out of the box without any wrapping class. This does however mean that .icon-left, .icon-right or .switch are not included.

Grab the raw CSS here, or import the reset from unpkg via https://unpkg.com/nice-forms.css@0.1.7/dist/nice-forms-reset.css

Check out the example page

Customization

The styling is highly customizable using css variables.

Contribute

If you encounter a bug on any device or have suggestions for improvement, don't hesitate to open a bug report or pull request.

Check out the repo