Top
MaskedInput - Styling & Theming
MaskedInput
To style and customize the appearance of <MaskedInput />, you can use one of the following strategies:
  • Specify a style prop with the desired values
  • Specify an input className - note that this will not override the default masked input className of zippy-react-toolkit-masked-input, but rather will be appended to the classNames the masked input already has.
Below you can find a list with all the CSS classes applied to the masked inputs and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-masked-input
This is the block className for all masked inputs. Always applied.
zippy-react-toolkit-masked-input--empty
Applied when the current value of the input is null.
zippy-react-toolkit-masked-input--masked
Applied when the input has a mask.
zippy-react-toolkit-masked-input--unmasked
Applied when the input doesn't have a mask.
zippy-react-toolkit-masked-input--locked
Applied when the input is locked.
zippy-react-toolkit-masked-input--disabled
Applied when the input is disabled.
zippy-react-toolkit-masked-input__focused
Applied when the input is focused.