+

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.

Types

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.

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).

Demo

Square Input Fields

.
.
.
Semi-rounded Input Fields

.
.
.
Rounded Input Fields

.
.
.
Square Expanded Input Fields

.
.
.
Semi-rounded Expanded Input Fields

.
.
.
Rounded Expanded Input Fields

.
.
.

Editing

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

Expanded




HTML



<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.