Tutorial HTML <kbd>
HTML
kbd Tag - belajar html kbd, element kbd adalah salah satu dari tag phrase atau frase, elemen ini mendefinisikan input keyboard .
Contoh Tag Phrase adalah sebagai berikut
<em><code><kbd><samp><strong><var>
Contoh penerapan html <kbd>
<p>
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <p> <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>. </p> </body> </html>
Global Attributes:
Element
<kbd> mencakup Global Attributes HTML.
Event Attributes:
Element
<kbd> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<kbd>, mempunyai nilai default :kbd {
font-family: monospace;
}
Dengan menambahkan css tambahan untuk elemen kbd, dapat membuat tampilan yang berbeda disesuaikan dengan yang diinginkan. Contoh :
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
color: #dedede;
background-color: #000000;
border: 1px solid #737677;
border-radius: 4px;
box-shadow: 1px 1px 0 rgba(27, 25, 25, 0.62), 0 0 0 1px #000 inset;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
color: #dedede;
background-color: #000000;
border: 1px solid #737677;
border-radius: 4px;
box-shadow: 1px 1px 0 rgba(27, 25, 25, 0.62), 0 0 0 1px #000 inset;
white-space: nowrap;
}
</style>
</head>
<body>
<p>
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>
</body>
</html>