Some Lesser-Known CSS Properties for Form Input Fields

CSS Web Development Front End Technology

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

Live Demo

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

Live Demo

<!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 −

AmitDiwan

Published on 13-Mar-2021 12:13:47

Previous Page Print Page