How to Make Text Input Non-Editable using CSS?
Last Updated :
11 Jul, 2025
There are situations where you might want to create non-editable input fields. HTML and CSS both provide ways to achieve this.
1. The read-only Attribute in HTML
The read-only attribute in HTML is used to make a text input field non-editable, meaning users can see the content but cannot modify it. This is helpful when you want to display information without allowing the user to alter the data.
Syntax:
<input type="text" readonly>
Example: This example demonstrates two text input fields: one editable and the other non-editable using the readonly attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Non-Editable Input with Read-Only</title>
<style>
input {
padding: 10px;
font-size: 16px;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h2>Example 1: Read-Only Input Field</h2>
<input type="text" value="Editable Text" />
<input type="text" value="Non-Editable Text" readonly />
</body>
</html>
Output:
The read-only Attribute in HTML2. The pointer-events Property in CSS
In CSS, the pointer-events property is used to control whether or not an element reacts to pointer events (such as clicks, hovers, and other interactions). When set to none, the element becomes non-interactive, effectively disabling it for all pointer events, including clicks and text selection.
Example 2: This example creates two input text, both of them are non-editable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Non-Editable Input with Pointer Events</title>
<style>
input {
padding: 10px;
font-size: 16px;
margin: 10px;
}
.no-pointer {
pointer-events: none;
background-color: #f0f0f0;
}
</style>
</head>
<body style="text-align:center;">
<h2>Example 2: Non-Editable Input with CSS</h2>
<input type="text" value="Non-Editable Text" class="no-pointer" />
<input type="text" value="Another Non-Editable Text" class="no-pointer" />
</body>
</html>
Output:
The pointer-events Property in CSS