自定義checkbox,radio樣式

1.深入了解html label標(biāo)簽
HTML <label>元素表示用戶界面中項(xiàng)目的標(biāo)題。

它通常關(guān)聯(lián)一個(gè)控件,或者是將控件放置在label元素內(nèi),或者是用作其屬性。這樣的控制稱作label元素的labeled control 。

屬性
該元素包含 全局屬性.

**accesskey
** HTML 4 HTML5
從鍵盤訪問該元素的快捷鍵。

for
**
可標(biāo)記的 form相關(guān)元素的ID,在同一文檔中作為label元素。 第一個(gè)這樣的元素在文檔中有一個(gè)ID匹配屬性值,作為這個(gè)label元素的
labeled control
注意: label元素可同時(shí)有屬性和包含控件元素(contained control element),只要此屬性指向包含控件元素。

**form
** HTML5
表示label元素關(guān)聯(lián)的form元素(它的表單擁有者)。此屬性值必須是同一文檔中<form>元素的后代。應(yīng)用此屬性值,你可以將label元素放置在文檔的任何位置,而不僅僅是作為它的擁有者<form>元素的后代。

本次示例是在firefox演示(如果其他瀏覽器對(duì)accesskey操作不成功的,請(qǐng)參考文章最后各瀏覽器下的快捷鍵)label的for屬性是和input的id綁定,當(dāng)我們點(diǎn)擊input前面的文本標(biāo)識(shí)會(huì)自動(dòng)聚焦到文本框,例如:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label for="name">用戶名</label>
<input type="text" name="name" accesskey="c" id="name" />
<br/>
<a href='./show.php' accesskey="h">去我的主頁</a>
</form>
</body>
</html>

這個(gè)例子,當(dāng)我點(diǎn)擊用戶名的時(shí)候,會(huì)自動(dòng)聚焦到文本框里頭,也就是光標(biāo)會(huì)自動(dòng)定位到文本框里


accesskey 屬性規(guī)定激活(使元素獲得焦點(diǎn))元素的快捷鍵。

注釋:以下元素支持 accesskey 屬性:<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
以上示例 : shift+alt+c值 ,可以發(fā)現(xiàn)光標(biāo)聚焦到該input內(nèi),shift+alt+h值 ,可以發(fā)現(xiàn)頁面跳轉(zhuǎn)到該a標(biāo)簽的href地址


各種瀏覽器下accesskey快捷鍵的使用方法
IE瀏覽器
按住Alt鍵,點(diǎn)擊accesskey定義的快捷鍵(焦點(diǎn)將移動(dòng)到鏈接),再按回車.
FireFox瀏覽器
按住Alt+Shift鍵,點(diǎn)擊accesskey定義的快捷鍵.
Chrome瀏覽器
按住Alt鍵,點(diǎn)擊accesskey定義的快捷鍵.
Opera瀏覽器
按住Shift鍵,點(diǎn)擊esc,出現(xiàn)本頁定義的accesskey快捷鍵列表可供選擇.
Safari瀏覽器
按住Alt鍵,點(diǎn)擊accesskey定義的快捷鍵.

2.了解CSS邊框、背景、偽元素、偽類等屬性的設(shè)置

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容