diff --git a/src/index.ts b/src/index.ts
index fede7e6..9e579fb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,7 +25,7 @@ function keyDownHandler(event: KeyboardEvent) {
   if (isFormField(event.target)) {
     const target = event.target as HTMLElement
     if (!target.id) return
-    if (!target.ownerDocument.querySelector(`[data-hotkey-scope="${target.id}"]`)) return
+    if (!target.ownerDocument.querySelector(`[data-hotkey-scope="${CSS.escape(target.id)}"]`)) return
   }
 
   // If the user presses a hotkey that doesn't exist in the Trie,
diff --git a/test/test.js b/test/test.js
index d26d497..bd3fa7c 100644
--- a/test/test.js
+++ b/test/test.js
@@ -173,6 +173,19 @@ describe('hotkey', function () {
   })
 
   describe('data-hotkey-scope', function () {
+    it.each(['field"one', 'field\\one'])('matches a scope whose ID contains CSS escapes: %s', function (id) {
+      setHTML(`
+        <button id="button1" data-hotkey-scope="textfield" data-hotkey="Meta+b">Button 1</button>
+        <input id="textfield" />`)
+      const field = document.getElementById('textfield')
+      field.id = id
+      document.getElementById('button1').setAttribute('data-hotkey-scope', id)
+
+      field.dispatchEvent(new KeyboardEvent('keydown', {bubbles: true, key: 'b', metaKey: true}))
+
+      expect(elementsActivated).toEqual(['button1'])
+    })
+
     it('allows hotkey action from form field', function () {
       setHTML(`
       <button id="button1" data-hotkey-scope="textfield" data-hotkey="Meta+b">Button 1</button>