read-write與:read-only選擇器用法詳解
- 云罗郡主轉載
- 2018-11-21 17:09:532521瀏覽
這篇文章帶給大家的內容是關於read-write與:read-only選擇器用法詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
:read-write與：read-only選擇器
在Web表單中，有些表單元素（如輸入框、文字域等）有「可讀寫」和「唯讀」這2種狀態。預設情況下，這些表單元素都處於「可讀寫」狀態。
在CSS3中，我們可以使用：read-write選擇器和：read-only選擇器來分別設定表單元素的「可讀寫」與「只讀」這兩種狀態的CSS樣式。
程式碼案例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :read-write与:read-only选择器</title>
<style type="text/css">
input[type="text"]:read-write
{
outline:1px solid #63E3FF;
}
input[type="text"]:read-only
{
background-color:#EEEEEE;
}
</style>
</head>
<body>
<form>
<p><label for="text1">读写:</label><input type="text" name="text1"/></p>
<p><label for="text2">只读:</label><input type="text" name="text2" readonly="readonly"/></p>
</form>
</body>
</html>在瀏覽器預覽效果如下：
#以上就是對read-write與:read-only選擇器用法詳解的全部介紹，如果您想了解更多有關CSS3教程，請關注PHP中文網。
以上是read-write與:read-only選擇器用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：lvyestudy.com。如有侵權，請聯絡admin@php.cn刪除