Document

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

With additional information below the label

Basic form group

With additional information

Input types

All available input types are included

Text

Email

Phone number

Url

Password

Search

Disabled Field

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 can have additional information

Checkbox with label

Checkbox can have additional information

Switch

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

Switch with label

I am additional information regarding this field

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 favourite framework

React

Vue

Angular

Select your favourite languages

HTML

CSS

Javascript

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.

Phone number

Url

Email

Password

Phone number

Url

Email

Password

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.

Email

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

Other input types

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.

Textarea

Select

File upload

Range slider

Number

Color

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

Customization

The styling is highly customizable using css variables.

1

--nf-input-size: 1rem;

2

--nf-input-font-size: calc(var(--nf-input-size) * 0.875);

3

--nf-small-font-size: calc(var(--nf-input-size) * 0.875);

4

--nf-input-font-family: inherit;

5

--nf-label-font-family: inherit;

6

--nf-input-color: #20242f;

7

--nf-input-border-radius: 0.25rem;

8

--nf-input-placeholder-color: #979cae;

9

--nf-input-border-color: #c0c4c9;

10

--nf-input-border-width: 1px;

11

--nf-input-border-style: solid;

12

--nf-input-border-bottom-width: 2px;

13

--nf-input-focus-border-color: #3b4ce2;

14

--nf-input-background-color: #f9fafb;

15

--nf-invalid-input-border-color: var(--nf-input-border-color);

16

--nf-invalid-input-background-color: var(--nf-input-background-color);

17

--nf-invalid-input-color: var(--nf-input-color);

18

--nf-valid-input-border-color: var(--nf-input-border-color);

19

--nf-valid-input-background-color: var(--nf-input-background-color);

20

--nf-valid-input-color: inherit;

21

--nf-invalid-input-border-bottom-color: red;

22

--nf-valid-input-border-bottom-color: green;

23

--nf-label-font-size: var(--nf-small-font-size);

24

--nf-label-color: #374151;

25

--nf-label-font-weight: 500;

26

--nf-slider-track-background: #dfdfdf;

27

--nf-slider-track-height: 0.25rem;

28

--nf-slider-thumb-size: calc(var(--nf-slider-track-height) * 4);

29

--nf-slider-track-border-radius: var(--nf-slider-track-height);

29

--nf-slider-thumb-border-width: 2px;

30

--nf-slider-thumb-border-focus-width: 1px;

31

--nf-slider-thumb-border-color: #ffffff;

32

--nf-slider-thumb-background: var(--nf-input-focus-border-color);

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.