刻意練習
井字遊戲．image sprites
04-18 :read-only
輸入框「可讀」不能寫 :
<input type="text">使用 read-only 屬性來設定「積分」欄位為唯讀狀態。
九宮格裡的 X、O 圖示 :
使用 CSS 圖片精靈 ( CSS Image Sprites )，將四張小圖示 ( X圖、O圖、X半遮罩圖、O半遮罩圖 ) 合併進同一張大圖中，以「CSS 定位」單獨顯示各張小圖示。
CSS 圖片精靈 ( CSS Image Sprites ) 生成工具 :
圖片精靈製作參考 CSS Sprites Generator Tool | Toptal® 工具。
結構
...
<!--//選擇 X、O -->
<form action="">
<div id="x" …>
<img src="…/x_s.png" …>
<input type="text" … class="input-txt" readonly>
</div>
<div id="o" …>
<img src="…/o_s.png" …>
<input type="text" … class="input-txt" readonly>
</div>
</form>
<!--//井字九宮格-->
<ul>
<li class="bg-x"></li><!--背景圖( X 圖 )-->
<li class="bg-o"></li><!--背景圖( O 圖 )-->
<li></li><!--空白-->
...
</ul>
<!--//按鈕-->
<button>再玩一次</button>
...
樣式
…
/* 圖片精靈 CSS 定位 */
.bg-o {
background: url('…/css_sprites_s.png') -2px -2px; /* O圖 */
}
.bg-o:hover {
background: url('…/css_sprites_s.png') -39px -3px; /* O半遮罩圖 */
}
.bg-x {
background: url('…/css_sprites_s.png') -2px -38px; /* X圖 */
}
.bg-x:hover {
background: url('…/css_sprites_s.png') -39px -39px; /* X半遮罩圖 */
}
…
/* 輸入框-基礎樣式 */
.input-txt{
width: … ;
text-align: … ;
color: … ;
}
/* 輸入框-唯讀樣式 */
.input-txt:read-only {
border-color: transparent; /* 透明邊框線 */
background-color: transparent; /* 透明背景色 */
outline: 0; /* 移除 focus 外框線 */
}
…
程式碼
CSS image sprites：tic-tac-toe game - CodePen
語法
:read-only - MDN
補充
- 資料就是回不來!Readonly與Disabled無法送回後台 - 聆風之境
- ( CodePen ) readonly and disabled - miunote
- HTML & CSS - Using Image Sprites - mjdwebdesign