CSS3 selector: read-only selector CSS3 selector: Read-write Selector

CSS3 selector: read-only Selector

The ": Read-only" pseudo-class selector is used to specify the style of elements that are in a read-only state. The simple point of understanding is that "readonly= ' ReadOnly" is set in the element

Sample Demo

Use the ": Read-only" selector to set the style of the Address text box.

HTML code:

<form action= "#" >  <div>    <label for= "name" > name:</label> <input    type= "text" Name= "name" id= "name" placeholder= "Desert"/>  </div>  <div>    <label for= "Address" > Addresses: </label>    <input type= "text" name= "Address" id= "address" placeholder= "Shanghai, China" readonly= "readonly"/>  </div></form>  

CSS code:

form {  width:300px;  padding:10px;  border:1px solid #ccc;  margin:50px Auto;} form > div {  margin-bottom:10px;} Input[type= "text"]{  border:1px solid orange;  padding:5px;  Background: #fff;  border-radius:5px;} Input[type= "text"]:-moz-read-only{  border-color: #ccc;} Input[type= "text"]:read-only{  border-color: #ccc;}

Results Demo

CSS3 selector: Read-write Selector

The ": Read-write" selector is just the opposite of the ": Read-only" selector, which is used primarily to specify the style when the element is in a non-read-only state.

Sample Demo

Use the ": Read-write" selector to set the text box style that is not a read-only control.

HTML code:

<form action= "#" >  <div>    <label for= "name" > name:</label> <input    type= "text" Name= "name" id= "name" placeholder= "Desert"/>  </div>  <div>    <label for= "Address" > Addresses: </label>    <input type= "text" name= "Address" id= "address" placeholder= "Shanghai, China" readonly= "readonly"/>  </div></form>  

CSS code:

form {  width:300px;  padding:10px;  border:1px solid #ccc;  margin:50px Auto;} form > div {  margin-bottom:10px;} Input[type= "text"]{  border:1px solid orange;  padding:5px;  Background: #fff;  border-radius:5px;} Input[type= "text"]:-moz-read-only{  border-color: #ccc;} Input[type= "text"]:read-only{  border-color: #ccc;} Input[type= "text"]:-moz-read-write{  border-color: #f36;} Input[type= "text"]:read-write{  border-color: #f36;}

Results Demo:

CSS3 selector: read-only selector CSS3 selector: Read-write selector