CSS pseudo-class - :read-write
CSS :read-write pseudo-class matches elements that can be changed by the user, such as input fields and textareas. This includes elements that do not have the readonly attribute.
Syntax
:read-write {
/* ... */
}
For better browser compatability, you can use -moz and -webkit prefixes. For example: input: -moz-read-write and input: -webkit-read-write.
CSS :read-write - Basic Example
Here is an example of how to use the :read-write pseudo-class −
<html>
<head>
<style>
input:read-only {
background-color: pink;
border: 1px solid red;
}
</style>
</head>
<body>
<label for="editableInput">Editable Input:</label>
<input type="text" id="editableInput" value="This is editable">
<label for="readonlyInput">Read-only Input:</label>
<input type="text" id="readonlyInput" value="This is read-only" readonly>
</body>
</html>
CSS :read-write - Confirming Form Information
Here is an example of a reservation confirmation form with editable fields −
<html>
<head>
<style>
.form-container {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 10px;
}
input:read-write {
background-color: violet;
border: none;
}
.submit-container {
margin-top: 10px;
}
button {
background-color: green;
border: none;
padding: 10px;
color: white;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="john@example.com">
<label for="password">Password:</label>
<input type="password" id="password" name="password" value="124569763">
<div class="submit-container">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
CSS :read-write - Styling read-write Non-Form Controls
Following example demonstrates using :read-write pseudo-class that selects any element that can be edited by the user.−
<html>
<head>
<style>
div.read-only-para {
background-color: pink;
border: 1px solid red;
}
div.editable-para {
background-color: violet;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="read-only-para">This is read-only div element</div><br>
<div class="editable-para" contenteditable>This is editable div element</div>
</body>
</html>
Advertisements