🎨 Complete CSS Input Types Guide

📝 Text Input Types

1. Text Input

For regular text input like names, addresses, etc.

Common Properties:

  • padding: Space inside the input
  • border: Border around the input
  • border-radius: Rounded corners
  • font-size: Size of text
  • width/height: Size of input box
  • background-color: Background color
  • color: Text color

2. Email Input

For email addresses - has built-in validation

3. Password Input

For passwords - text is hidden

4. Search Input

For search boxes - may have special styling

5. URL Input

For website URLs - has built-in validation

6. Telephone Input

For phone numbers

🔢 Number Input Types

7. Number Input

For numeric values with up/down arrows

Special Properties:

  • min: Minimum value
  • max: Maximum value
  • step: Increment step

8. Range Slider

For selecting values with a slider

Styling Properties:

  • accent-color: Color of the slider thumb
  • height: Height of the track
  • background: Track background color

📅 Date & Time Input Types

9. Date Input

For selecting dates

10. Time Input

For selecting time

11. DateTime Local

For selecting date and time together

12. Month Input

For selecting month and year

13. Week Input

For selecting week and year

☑️ Selection Input Types

14. Checkbox

For yes/no or multiple selections

Styling Properties:

  • accent-color: Color of the checkbox
  • width/height: Size of checkbox
  • margin: Space around checkbox

15. Radio Button

For selecting one option from multiple choices

🎨 Special Input Types

16. Color Input

For selecting colors

Styling Properties:

  • width/height: Size of color picker
  • border: Border around picker
  • border-radius: Make it round or square

17. File Input

For uploading files

Special Properties:

  • accept: File types allowed
  • multiple: Allow multiple files

🔘 Button Input Types

18. Submit Button

For submitting forms

19. Button

For general actions

20. Reset Button

For clearing form data

Button Styling Properties:

  • background: Background color/gradient
  • color: Text color
  • border: Border styling
  • padding: Space inside button
  • cursor: Pointer cursor on hover
  • transition: Smooth animations
  • :hover: Styling when mouse hovers

📋 Other Form Elements

21. Textarea

For multi-line text input

Special Properties:

  • resize: Control if user can resize
  • rows/cols: Initial size

22. Select Dropdown

For selecting from a dropdown list

🎯 Common CSS Properties for All Inputs

/* Basic Styling */ input { padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; width: 100%; box-sizing: border-box; } /* Focus State */ input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } /* Hover Effect */ input:hover { border-color: #999; } /* Disabled State */ input:disabled { background-color: #f5f5f5; cursor: not-allowed; } /* Placeholder Styling */ input::placeholder { color: #999; font-style: italic; }