

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Some Lesser-Known CSS Properties for Form Input Fields
CSS caret-color, pointer-events and tab-size are some of the lesser-known properties for form input fields. caret-color property allows us specify color of blinking caret while pointer-events can help prevent the users to find an element. Finally, tab-size sets the amount of white space used by tab.
The following examples illustrate some of these properties.
Example
<!DOCTYPE html> <html> <head> <style> body { display: flex; flex-direction: column; background-color: mistyrose; } p { white-space: pre; } p:last-of-type { tab-size: 32; -moz-tab-size: 32; pointer-events: none; } </style> </head> <body> <p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p> <p> Ut sed felis lobortis, <a href=#>fermentum magna vitae</a>, imperdiet lectus.</p> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> form { padding: 2%; margin: 3%; background-color: cadetblue; text-align: center; } form:focus-within { box-shadow: 0 0 10px rgba(0,0,0,0.6); } input { caret-color: navy; font-size: 40px; font-weight: large; } </style> </head> <body> <form> <select> <option>.</option> <option>..</option> <option>...</option> </select> <input type="text" value="glee" /> </form> </body> </html>
Output
This will produce the following result −
- Related Questions & Answers
- Style Input Fields of a form with CSS
- How to add form validation for empty input fields with JavaScript?
- What are the lesser known places in Hyderabad which are worth visiting?
- Essential CSS Properties for Styling Tables
- Why lesser known cricketers are given the role of selecting the Indian cricket team?
- Bootstrap Form Input
- Container for form input and label with Bootstrap
- Design a Moore machine for some binary input sequence.
- Add a background color to the form input with CSS
- Bootstrap complex form layout for combined vertical/inline fields with HTML
- CSS Border Properties
- CSS Background Properties
- CSS Dimension Properties
- CSS Margin Properties
- CSS to put icon inside an input element in a form
Advertisements