Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Some Lesser-Known CSS Properties for Form Input Fields
CSS provides several lesser-known properties that can enhance form input fields and text elements. The tab-size property controls the width of tab characters, pointer-events determines element interactivity, and caret-color customizes the cursor color in input fields.
The tab-size Property
The CSS tab-size property sets the width of tab characters in text elements. This property is particularly useful when displaying preformatted text or code.
Syntax
tab-size: value;
Possible Values
| Value | Description |
|---|---|
number |
Number of space characters (default is 8) |
length |
Length in px, em, rem, etc. |
Example
The following example demonstrates different tab sizes on preformatted text −
<!DOCTYPE html>
<html>
<head>
<style>
.tab-demo {
white-space: pre;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
background-color: #f9f9f9;
}
.default-tab {
tab-size: 8;
}
.large-tab {
tab-size: 16;
-moz-tab-size: 16;
}
</style>
</head>
<body>
<p class="tab-demo default-tab">Name: John Doe
Age: 30</p>
<p class="tab-demo large-tab">Name: John Doe
Age: 30</p>
</body>
</html>
Two text blocks appear with tab-separated content. The second block has wider tab spacing (16 characters) compared to the first block (8 characters).
The pointer-events Property
The pointer-events property controls whether an element responds to mouse events like clicks, hovers, and cursor changes.
Syntax
pointer-events: value;
Possible Values
| Value | Description |
|---|---|
auto |
Element reacts to pointer events (default) |
none |
Element ignores all pointer events |
Example
The following example shows how to disable pointer events on specific elements −
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.link {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<button class="button">Clickable Button</button>
<button class="button disabled">Disabled Button</button>
<br>
<a href="#" class="link">Normal Link</a>
<a href="#" class="link disabled">Disabled Link</a>
</body>
</html>
Two buttons and two links appear. The first button and link are interactive, while the second button and link appear faded and do not respond to clicks or hover effects.
The caret-color Property
The caret-color property changes the color of the text cursor (caret) in editable elements like input fields and textareas.
Syntax
caret-color: value;
Possible Values
| Value | Description |
|---|---|
auto |
Uses the default system caret color |
color |
Any valid CSS color value |
transparent |
Makes the caret invisible |
Example
The following example demonstrates custom caret colors in different input fields −
<!DOCTYPE html>
<html>
<head>
<style>
.form-container {
padding: 20px;
max-width: 400px;
margin: 20px auto;
background-color: #f5f5f5;
border-radius: 8px;
}
.input-field {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.red-caret {
caret-color: red;
}
.blue-caret {
caret-color: #007bff;
}
.green-caret {
caret-color: #28a745;
}
</style>
</head>
<body>
<div class="form-container">
<input type="text" class="input-field red-caret" placeholder="Red caret" />
<input type="text" class="input-field blue-caret" placeholder="Blue caret" />
<textarea class="input-field green-caret" placeholder="Green caret in textarea"></textarea>
</div>
</body>
</html>
A form container with three input fields appears. When you click inside each field, the text cursor displays in different colors: red in the first input, blue in the second input, and green in the textarea.
Conclusion
These lesser-known CSS properties provide valuable control over form elements and text display. Use tab-size for better code formatting, pointer-events for interactive control, and caret-color for enhanced visual feedback in input fields.
250 Views
