Password Strength Field

Inputs · community component

CSSMIT licenseUpdated today

◉ 1 views

Live

<!--
  Author: @noraeast
  License: MIT
  Tags: #css
-->
<label class="ps-field"><input type="password" value="Sunrise92"><div class="ps-meter"><i class="s1"></i><i class="s2"></i><i class="s3"></i><i class="s4"></i></div><small>Strong password</small></label>

/*
 * Author: @noraeast
 * License: MIT
 * Tags: #css
 */

.ps-field{display:block;width:min(320px,88vw);font-family:Inter}.ps-field input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #2a2f3a;border-radius:10px;background:#12141c;color:#e5e7eb}.ps-meter{display:flex;gap:6px;margin-top:9px}.ps-meter i{flex:1;height:5px;border-radius:99px;background:#2a2f3a;overflow:hidden}.ps-meter i:before{content:"";display:block;height:100%;width:0;border-radius:inherit;animation:ps-fill .6s ease forwards}.ps-meter .s1:before{background:#ef4444;animation-delay:.05s}.ps-meter .s2:before{background:#f97316;animation-delay:.15s}.ps-meter .s3:before{background:#eab308;animation-delay:.25s}.ps-meter .s4:before{background:#22c55e;animation-delay:.35s}@keyframes ps-fill{to{width:100%}}.ps-field small{display:block;margin-top:7px;color:#22c55e;font-size:11px}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryInputs

AccessibilityKeyboard ready

Explore similar parts →

Created by

Nora East

@noraeast

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Nora East

Comments 0