close



支援CSS3 以上

用法：:read-only
說明：
用在input輸入框，配合readonly來使用。

當input 為readonly屬性則套用樣式

css定義：
input:read-only {
    background-color: red;
}
注意事項：

readonly :不可修改 之意

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector read-only 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:-moz-read-only { /* For Firefox */
    background-color: red;
}

input:read-only {
    background-color: red;
}
</style>
</head>
<body>
<form action="">
name: <input readonly type="text" value="levin"  ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：




測試結束~
如果還不了解可參考：w3schools CSS Selector Reference


感謝~

 




 






 















其它文章

arrow
arrow
    文章標籤
    css3 selector readonly 樣式 程式 用法 目錄 套用
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄