CSS3選取器 :read-only選取器 CSS3選取器 :read-write選取器

標籤：ext   選擇   html   pad   使用   狀態   otto   back   border   

CSS3選取器 :read-only選取器

“:read-only”偽類別選取器用來指定處於唯讀狀態元素的樣式。簡單點理解就是，元素中設定了“readonly=’readonly’”

樣本示範

通過“:read-only”選取器來設定地址文字框的樣式。

HTML代碼：

<form action="#">  <div>    <label for="name">姓名:</label>    <input type="text" name="name" id="name" placeholder="大漠" />  </div>  <div>    <label for="address">地址:</label>    <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />  </div></form>  

CSS代碼：

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;}

結果示範

CSS3選取器 :read-write選取器

“:read-write”選取器剛好與“:read-only”選取器相反，主要用來指定當元素處於非唯讀狀態時的樣式。

樣本示範

使用“:read-write”選取器來設定不是唯讀控制項的文字框樣式。

HTML代碼：

<form action="#">  <div>    <label for="name">姓名:</label>    <input type="text" name="name" id="name" placeholder="大漠" />  </div>  <div>    <label for="address">地址:</label>    <input type="text" name="address" id="address" placeholder="中國上海" readonly="readonly" />  </div></form>  

CSS代碼：

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;}

結果示範：

 

CSS3選取器 :read-only選取器 CSS3選取器 :read-write選取器