Skip to content

Pico CSS

Understand the stylesheet that gives native form controls their default appearance in an existing Pico site.

Visit Pico CSS

Is Pico CSS still maintained?

No. The maintainer named v2.1.1 as the final release and archived the project. The existing release is still distributed according to the maintainer.

If an existing form works today, the archive does not switch it off. It changes who will fix issues later. Record the exact version the site loads, keep a copy you control and decide who would maintain it or replace it when your needs change.

How do you tell where an existing Pico form gets its styles?

Find the stylesheet the page loads. Pico styles ordinary HTML elements, so a form can look different when the stylesheet changes even if its fields have few class names.

Pico files you may find in an existing project
If the page loadsWhat to check
The regular stylesheetCheck the main page container as well as the form. Existing form markup can use normal input and label elements.
A class-less stylesheetCheck how header, main and footer set the page width. The regular and fluid class-less files use different widths.
A conditional stylesheetCheck which part of the page is wrapped in a pico class. A small reset on the root can still affect typography outside the wrapper.

What should you test before keeping or replacing Pico?

Compare the same form in a disposable copy before and after changing the stylesheet. Start by checking what the customer needs to read and click.

  1. Save the working version and one sample form
    Find the file name and version. Keep the stylesheet and your own HTML in your project so the comparison is repeatable.
  2. Check the states your page actually uses
    Inspect a phone width, a wide screen and the keyboard order. Try a long label and text error. If you change a shared custom property such as a color, check a second screen too.
  3. Make one replacement at a time
    Compare that form with its Pico stylesheet removed in the disposable copy. Identify what would need ordinary CSS or another maintained stylesheet. Keep the working copy available while you check the browsers your users need.

Can you keep a copy or maintain a fork?

The code is MIT licensed. You can keep the released file, or make a separate copy of the source to maintain yourself under the license terms.

The maintainer says the code license does not cover Pico’s name or logo. Choose a different name for a fork so people can distinguish it from the archived project. Keep your existing form code, local styles and version alongside the license.