diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 4505ad2746f..820c7e64254 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -23,12 +23,12 @@ ion-textarea {
width: 100%;
}
-
.item-input ion-input,
.item-input ion-textarea {
position: static;
}
+
// Textarea Within An Item
// --------------------------------------------------
@@ -64,7 +64,6 @@ textarea.text-input {
opacity: .4;
}
-
input.text-input:-webkit-autofill {
background-color: transparent;
}
@@ -81,6 +80,7 @@ input.text-input:-webkit-autofill {
// This make it so the native input element is not clickable.
// This will only show when the scroll assist is configured
// otherwise the .input-cover will not be rendered at all
+// The input cover is not clickable when the input is disabled
.input-cover {
position: absolute;
@@ -91,6 +91,10 @@ input.text-input:-webkit-autofill {
height: 100%;
}
+ion-input[disabled] .input-cover {
+ pointer-events: none;
+}
+
// Input Cover: Focused
// --------------------------------------------------
diff --git a/src/components/input/test/input-focus/main.html b/src/components/input/test/input-focus/main.html
index 8dc23fa8deb..d6f838d64aa 100644
--- a/src/components/input/test/input-focus/main.html
+++ b/src/components/input/test/input-focus/main.html
@@ -214,6 +214,11 @@
+
+ Disabled Input:
+
+
+