Input Fields

Input Fields include different input fields as UI controllers to put information on servers. PixelzUI provides thirty classes. Each input field has common .if class. Classes start from .if-a to .if-z for input fields' sizing. However, .if-exp, .if-srnd & .if-rnd are used for buttons' styling.


Following are the four types of input fields in PixelzUI.

  1. Square
  2. Semi-rounded
  3. Rounded
  4. Expanded
=>Other types are based on input field size & color classes.


Following are the classes to use input Fields in your web-page.

  1. .if
  2. .if-srnd
  3. .if-rnd
  4. .if-exp
  5. .if-a
  6. .if-b
  7. .if-c
  8. .if-d
  9. .if-e
  10. .if-f
  11. .if-g
  12. .if-h
  13. .if-i
  14. .if-j
  15. .if-k
  16. .if-l
  17. .if-m
  18. .if-n
  19. .if-o
  20. .if-p
  21. .if-q
  22. .if-r
  23. .if-s
  24. .if-t
  25. .if-u
  26. .if-v
  27. .if-w
  28. .if-x
  29. .if-y
  30. .if-z
=>Other classes are based on color classes.

How to use

  1. Add .if as class attribute in <input type="text">.
  2. <input type="text" class="if" />
  3. Add .if-* as an extra class attribute in <input type="text"> for sizing.
  4. <input type="text" class="if if-*" />
  5. Add .if-# as an extra class attribute in <input type="text"> for styling.
  6. <input type="text" class="if if-* if-#" />
  7. Add color classes as extra class attributes in <input type="text">.
  8. <input type="text" class="if if-* if-# bg-bl t-wt br-wt" />
=>* means (a - z).

=># means (srnd, rnd & exp).


Square Input Fields

Semi-rounded Input Fields

Rounded Input Fields

Square Expanded Input Fields

Semi-rounded Expanded Input Fields

Rounded Expanded Input Fields



You can make or modify input fields of your own choice by using this editor.

  1. Select background color from first color picker.
  2. Select foreground color from second color picker.
  3. Select border color from third color picker.
  4. Select input field size from first range slider.
  5. Select input field style from second range slider.
  6. Check expanded input field from first toggle button.
  7. See the effect in dummy button and HTML code.
  8. Copy that HTML code and place it in your script.

Background Color

Foreground Color

Border Color

Input Field Size

Input Field Shape

Square Semi-rounded Rounded

Input Field Style



<input class="if if-s if-srnd bg-bl t-wt br-wt" type="text" placeholder="Input Field" />

Leave a Reply

Your email address will not be published. Required fields are marked.