使用 javascript 模擬 :focus。由於 IE6 沒有支援 :focus，只好改用 onfocus, onblur 來模擬這個功能。下面範例還用到 className 這個特徵。
- 風格用法：
<style type='text/css'>
.onit {background:blue;
color: red;
font-size: 120%;
width: 300px
}
</style>
<p>TEXT：<input value='滑鼠點此'
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>BUTTON：<input type=button value='滑鼠點此'
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>CHECKBOX：<input type=checkbox
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>FILE：<input type=file
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>IMAGE：<input type=image
onfocus='this.className="onit"'
onblur='this.className=""'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisusG9Gxvhb9HT3WDSKFsiW_cEXy1nTaztMKzvjoq8hhXesJiyqD2aABdrIwLSTjLnGQprkM3tmU7ywgAqdlWajZIDPnxLV3sDB23pJAY7xpHdoCUZ9i-tRWRnjYidYBivnoCmjxkB62yg/s200/ant.GIF" />
<p>PASSWORD：<input type=password
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>RADIO：<input type=radio
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>RESET：<input type=reset value='滑鼠點此'
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>SUBMIT：<input type=submit value='滑鼠點此'
onfocus='this.className="onit"'
onblur='this.className=""' />
<p>ANCHOR：<a href='javascript:void(0)'
onfocus='this.className="onit"'
onblur='this.className=""'>滑鼠點此</a> - 執行結果：
TEXT：
BUTTON：
CHECKBOX：
FILE：
IMAGE：
PASSWORD：
RADIO：
RESET：
SUBMIT：
ANCHOR：滑鼠點此
- IE6 以上都可以用。Firefox 除了 FILE都可以用。Safari, Chrome 有兩種情形：（一）使用滑鼠點選，只能用在 TEXT 與 PASSWORD。（二）使用 TAB 輪選，則都可以選；而 Chrome 可選 ANCHOR 元素 ，Safari 則不能。
- 在 IE6, Safari, Chrome 中，RADIO 不能用 TAB 選；Firefox 則可以。
將 :focus 狀態傳給下一個元素。下例使用 E + F 規則。
- 風格用法：
<style type='text/css'>
.fcs {color:red;}
.fcs:focus {background:blue}
.fcs:focus + SPAN {background:white; color:red}
</style>
<input type=button value='OK' class=fcs />
<span>好玩遊戲，射擊遊戲，賽車遊戲。</span> - 執行結果： 好玩遊戲，射擊遊戲，賽車遊戲。
- 上例，Firefox 成功；IE6, Safari, Chrome 失敗。使用 E ~ F 規則測試，也得到相同的結果。
| focus（你正在看 第二頁） | : | 第一頁 | 第二頁 |
