Some Less Known CSS Properties for Form Input Fields

This post briefly discusses some less popular CSS properties that can be used to style form input fields. You can use them to make your form even more effective.

Changing Tab Width with tab-size Property

Changing the default tab size is useful in cases like typing code in a textarea. It can be done with tab-size.

tab-size: 16;
-moz-tab-size: 16;

The tab-size property can be set to a number, which denotes the no of spaces (8 is the default value).

Changing Caret Color with caret-color Property

Usually the color of the caret (vertical line inside a textbox) is the same as the color property of the field. In case you want the caret to have a different color, you can do so with caret-color.

caret-color: red;

Pretending Disabled with pointer-events Property

The normal (and recommended) way to disable a form field is through the disabled attribute. You can also fake the field to be disabled by setting pointer-events: none. As the name suggests, it will disable all mouse interactions on the field.

Please note that even though the mouse is disabled, keyboard events will still work. Somebody can still reach the form field through the "Tab" button and then type on the field.

Technically you can use pointer-events on any HTML element to prevent the user from using the mouse there.

pointer-events: none;