React Password Input Component Styling
Password Input Styling
Learn how to customize the React Password Input component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
On this page
SASS variables#
$input-* are shared across most of our form controls (and not buttons).
$input-padding-y: $input-btn-padding-y !default;$input-padding-x: $input-btn-padding-x !default;$input-font-family: $input-btn-font-family !default;$input-font-size: $input-btn-font-size !default;$input-font-weight: $font-weight-base !default;$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;$input-padding-x-sm: $input-btn-padding-x-sm !default;$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;$input-padding-x-lg: $input-btn-padding-x-lg !default;$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--cui-body-bg) !default;$input-disabled-color: var(--cui-body-color) !default;$input-disabled-bg: var(--cui-secondary-bg) !default;$input-disabled-border-color: var(--cui-border-color) !default;
$input-color: var(--cui-body-color) !default;$input-border-color: var(--cui-border-color) !default;$input-border-width: $input-btn-border-width !default;$input-box-shadow: var(--cui-box-shadow-inset) !default;
$input-border-radius: var(--cui-border-radius) !default;$input-border-radius-sm: var(--cui-border-radius-sm) !default;$input-border-radius-lg: var(--cui-border-radius-lg) !default;
$input-focus-bg: $input-bg !default;$input-focus-border-color: tint-color($primary, 50%) !default;$input-focus-color: $input-color !default;$input-focus-width: $input-btn-focus-width !default;$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--cui-secondary-color) !default;$input-plaintext-color: var(--cui-body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;$form-password-* are for our <CPasswordInput />s component.
$form-password-action-bg: transparent !default;$form-password-action-hover-bg: var(--cui-tertiary-bg) !default;$form-password-icon-show: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M256%2C144.927A103.309%2C103.309%2C0%2C1%2C0%2C359.309%2C248.236%2C103.426%2C103.426%2C0%2C0%2C0%2C256%2C144.927Zm0%2C174.618a71.309%2C71.309%2C0%2C1%2C1%2C71.309-71.309A71.39%2C71.39%2C0%2C0%2C1%2C256%2C319.545Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223c-77.75-77.749-204.258-77.749-282.008%2C0L16%2C233.79v28.893l98.778%2C102.689.218.222a199.409%2C199.409%2C0%2C0%2C0%2C282.008%2C0l99-102.911V233.79ZM464%2C249.79l-89.732%2C93.285a167.409%2C167.409%2C0%2C0%2C1-236.536%2C0L48%2C249.79v-3.107L137.729%2C153.4c65.247-65.13%2C171.3-65.13%2C236.542%2C0L464%2C246.683Z%22%20class%3D%22ci-primary%22/%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20x%3D%22240%22%20y%3D%22232%22%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;$form-password-icon-hide: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223C333.831%2C67.707%2C238.47%2C55.862%2C163.228%2C95.346l23.938%2C23.939c61.571-27.691%2C136.573-16.327%2C187.105%2C34.115L464%2C246.683v3.107l-71.744%2C74.585%2C22.63%2C22.63L496%2C262.683V233.79Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M352.8%2C284.33A103.307%2C103.307%2C0%2C0%2C0%2C219.907%2C151.438L246.1%2C177.63a71.228%2C71.228%2C0%2C0%2C1%2C80.507%2C80.508Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M369.9%2C347.268l-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806c-.083.113-.169.222-.253.334l-99.681-99.681c.112-.083.221-.17.334-.253L191.12%2C167.906c-.108.087-.213.179-.321.266L38.627%2C16H16V38.627l95.689%2C95.689L16%2C233.79v28.893l98.778%2C102.689.218.222A199.732%2C199.732%2C0%2C0%2C0%2C367.372%2C390l106%2C106H496V473.373L392.537%2C369.911Zm-177.157-131.9L288.871%2C311.5a71.28%2C71.28%2C0%2C0%2C1-96.133-96.133ZM137.729%2C343.073%2C48%2C249.79v-3.107l86.319-89.737%2C35.065%2C35.064A103.248%2C103.248%2C0%2C0%2C0%2C312.226%2C334.853l32.007%2C32.007C279.723%2C406.875%2C193.711%2C398.955%2C137.729%2C343.073Z%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;$form-password-icon-color: var(--cui-tertiary-color) !default;$form-password-icon-hover-color: var(--cui-secondary-color) !default;$form-password-icon-size: 1.25rem !default;$form-password-icon-size-lg: 1.5rem !default;$form-password-icon-size-sm: 1rem !default;