diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 988851b7..8543088a 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -326,7 +326,7 @@ export default {
       display: flex;
       align-items: center;
 
-      > input {
+      > label {
         flex: 0 0 auto;
         margin-right: 0.5rem;
       }
diff --git a/docs/src/demos/Examples/Tasks/index.vue b/docs/src/demos/Examples/Tasks/index.vue
index e0b33508..dad4df4e 100644
--- a/docs/src/demos/Examples/Tasks/index.vue
+++ b/docs/src/demos/Examples/Tasks/index.vue
@@ -69,7 +69,7 @@ ul[data-type="taskList"] {
     display: flex;
     align-items: center;
 
-    > input {
+    > label {
       flex: 0 0 auto;
       margin-right: 0.5rem;
     }
diff --git a/docs/src/demos/Experiments/MultipleEditors/index.vue b/docs/src/demos/Experiments/MultipleEditors/index.vue
index 1f7350b2..ab9454e8 100644
--- a/docs/src/demos/Experiments/MultipleEditors/index.vue
+++ b/docs/src/demos/Experiments/MultipleEditors/index.vue
@@ -158,7 +158,7 @@ export default {
         display: flex;
         align-items: center;
 
-        > input {
+        > label {
           flex: 0 0 auto;
           margin-right: 0.5rem;
         }
diff --git a/docs/src/demos/Nodes/TaskItem/index.vue b/docs/src/demos/Nodes/TaskItem/index.vue
index 5db4b650..ba15b994 100644
--- a/docs/src/demos/Nodes/TaskItem/index.vue
+++ b/docs/src/demos/Nodes/TaskItem/index.vue
@@ -56,7 +56,7 @@ ul[data-type="taskList"] {
     display: flex;
     align-items: center;
 
-    > input {
+    > label {
       flex: 0 0 auto;
       margin-right: 0.5rem;
     }
diff --git a/docs/src/demos/Nodes/TaskList/index.vue b/docs/src/demos/Nodes/TaskList/index.vue
index 201ebb18..9b4f96ca 100644
--- a/docs/src/demos/Nodes/TaskList/index.vue
+++ b/docs/src/demos/Nodes/TaskList/index.vue
@@ -60,7 +60,7 @@ ul[data-type="taskList"] {
     display: flex;
     align-items: center;
 
-    > input {
+    > label {
       flex: 0 0 auto;
       margin-right: 0.5rem;
     }
diff --git a/packages/extension-task-item/src/task-item.ts b/packages/extension-task-item/src/task-item.ts
index 076a6e4e..3628f815 100644
--- a/packages/extension-task-item/src/task-item.ts
+++ b/packages/extension-task-item/src/task-item.ts
@@ -81,11 +81,13 @@ export const TaskItem = Node.create<TaskItemOptions>({
     }) => {
       const { view } = editor
       const listItem = document.createElement('li')
+      const checkboxWrapper = document.createElement('label')
+      const checkboxStyler = document.createElement('span')
       const checkbox = document.createElement('input')
       const content = document.createElement('div')
 
+      checkboxWrapper.contentEditable = 'false'
       checkbox.type = 'checkbox'
-      checkbox.contentEditable = 'false'
       checkbox.addEventListener('change', event => {
         const { checked } = event.target as any
 
@@ -101,11 +103,14 @@ export const TaskItem = Node.create<TaskItemOptions>({
         checkbox.setAttribute('checked', 'checked')
       }
 
-      listItem.append(checkbox, content)
+      checkboxWrapper.append(checkbox, checkboxStyler)
+      listItem.append(checkboxWrapper, content)
 
-      Object.entries(HTMLAttributes).forEach(([key, value]) => {
-        listItem.setAttribute(key, value)
-      })
+      Object
+        .entries(HTMLAttributes)
+        .forEach(([key, value]) => {
+          listItem.setAttribute(key, value)
+        })
 
       return {
         dom: listItem,