Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
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.
The tab-size property
CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax.
tab-size: value;
The value above is the number value set for tab space.
Let's say, we have set the tab size to 32 using the tab-size property −
tab-size: 32;
The tab size for the firefox is also set −
-moz-tab-size: 32;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
}
p {
white-space: pre;
}
p:last-of-type {
tab-size: 32;
-moz-tab-size: 32;
}
</style>
</head>
<body>
<p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p>Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
</body>
</html>
The pointer-events property
To set whether an element reacts to pointer events or not, use the pointer-events property. The following is the syntax −
pointer-events: value;
The value can be
auto − The element reacts to pointer events. Default.
none − The element does not react to pointer events
Example
Let us see the 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>
The caret-color property
To set the color of the cursor (caret) i.e., the visible marker, use the caret-color property. This is the caret in input fields, textareas, etc. The following is the syntax −
caret-color: value;
The value can be
auto − The default color is used
color − Set your own color the for caret
Example
Let us see the 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>
162 Views
