:focus
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
:focus CSS 伪类表示è·å¾ç¦ç¹çå
ç´ ï¼å¦è¡¨åè¾å
¥ï¼ãå½ç¨æ·ç¹å»æè½»è§¦ä¸ä¸ªå
ç´ æä½¿ç¨é®çç Tab é®éæ©å®æ¶ï¼å®ä¼è¢«è§¦åã
å°è¯ä¸ä¸
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
<form>
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
</form>
夿³¨ï¼æ¤ä¼ªç±»ä»
éç¨äºç¦ç¹çå
ç´ èªèº«ã妿è¦éæ©å
å«ç¦ç¹å
ç´ çå
ç´ ï¼è¯·ä½¿ç¨ :focus-withinã
è¯æ³
:focus {
/* ... */
}
示ä¾
>HTML
<div><input class="red-input" value="å½è·å¾ç¦ç¹æ¶æå°åç°çº¢è²ã" /></div>
<div><input class="blue-input" value="å½è·å¾ç¦ç¹æ¶æå°åç°èè²ã" /></div>
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
ç»æ
æ éç¢èè
请确ä¿è§åä¸ä½³ç人å¯ä»¥çå°è§è§ç¦ç¹æç¤ºå¨ãè¿ä¹å°æå©äºä»»ä½å¨æäº®ç©ºé´ï¼å¦å®¤å¤é³å ä¸ï¼ä½¿ç¨å±å¹ç人ãWCAG 2.1 SC 1.4.11 éææ¬å¯¹æ¯åº¦ è¦æ±è§è§ç¦ç¹æç¤ºç¬¦ç对æ¯åº¦è³å°ä¸º 3 æ¯ 1ã
- æ éç¢çè§è§ç¦ç¹æç¤ºï¼è®©ä½ çç½ç«æ´å ·ç¦ç¹ï¼è®¾è®¡æç¨ä¸å¯ç¨çç¦ç¹æç¤ºå¨çæå·§
:focus { outline: none; }
æ°¸è¿ä¸è¦ä¸ºäºä» ç§»é¤ç¦ç¹è½®å»ï¼å¯è§çç¦ç¹æç¤ºï¼ï¼è䏿¿æ¢ä¸ºç¬¦å WCAG 2.1 SC 1.4.11 éææ¬å¯¹æ¯åº¦æ åçç¦ç¹è½®å»ã
- å°å»ºè®®ï¼æ°¸è¿ä¸è¦ç§»é¤ CSS è½®å»
è§è
| è§è |
|---|
| HTML> # selector-focus> |
| Selectors Level 4> # focus-pseudo> |