diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss
index 9581300459b..d9e3ee34d35 100644
--- a/core/src/components/input/input.md.outline.scss
+++ b/core/src/components/input/input.md.outline.scss
@@ -15,11 +15,32 @@
}
/**
- * The border should get thicker when
+ * If the input has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.input-fill-outline.ion-touched.ion-valid),
+:host(.input-fill-outline.ion-touched.ion-invalid) {
+ --border-color: var(--highlight-color);
+}
+
+/**
+ * Border should be
+ * slightly darker on hover.
+ */
+@media (any-hover: hover) {
+ :host(.input-fill-outline:hover) {
+ --border-color: #{$background-color-step-750};
+ }
+}
+
+/**
+ * The border should get thicker
+ * and take on component color when
* the input is focused.
*/
:host(.input-fill-outline.has-focus) {
--border-width: 2px;
+ --border-color: var(--highlight-color);
}
/**
@@ -30,16 +51,6 @@
border-top: none;
}
-/**
- * Border should be
- * slightly darker on hover.
- */
-@media (any-hover: hover) {
- :host(.input-fill-outline:hover) {
- --border-color: #{$background-color-step-750};
- }
-}
-
/**
* Outline inputs do not have a bottom border.
* Instead, they have a border that wraps the
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index b07c0bf9473..10c3bfe149a 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -49,6 +49,39 @@
min-height: 56px;
}
+// Input Label
+// ----------------------------------------------------------------
+
+/**
+ * When the input is focused the label should
+ * take on the highlight color.
+ */
+:host(.has-focus) label {
+ color: var(--highlight-color);
+}
+
+// Input Highlight
+// ----------------------------------------------------------------
+
+.input-highlight {
+ @include position(null, null, -1px, 0);
+
+ position: absolute;
+
+ width: 100%;
+ height: 2px;
+
+ transform: scale(0);
+
+ transition: transform 200ms;
+
+ background: var(--highlight-color);
+}
+
+:host(.has-focus) .input-highlight {
+ transform: scale(1);
+}
+
// Input Shape Rounded
// ----------------------------------------------------------------
diff --git a/core/src/components/input/input.md.solid.scss b/core/src/components/input/input.md.solid.scss
index 280c835cea0..9aba43a7d2e 100644
--- a/core/src/components/input/input.md.solid.scss
+++ b/core/src/components/input/input.md.solid.scss
@@ -19,6 +19,15 @@
border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
+/**
+ * If the input has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.input-fill-solid.ion-touched.ion-valid) .input-wrapper,
+:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper {
+ --border-color: var(--highlight-color);
+}
+
:host(.input-fill-solid) .input-bottom {
border-top: none;
}
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 51fed885a2e..9d29d76195e 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -43,6 +43,14 @@
--highlight-color-valid: #{ion-color(success, base)};
--highlight-color-invalid: #{ion-color(danger, base)};
+ /**
+ * This is a private API that is used to switch
+ * out the highlight color based on the state
+ * of the component without having to write
+ * different selectors for different fill variants.
+ */
+ --highlight-color: var(--highlight-color-focused);
+
display: block;
position: relative;
@@ -77,10 +85,14 @@
--padding-start: 0;
}
-:host(.ion-color) {
+:host(.legacy-input.ion-color) {
color: current-color(base);
}
+:host(.ion-color) {
+ --highlight-color-focused: #{current-color(base)};
+}
+
// Native Text Input
// --------------------------------------------------
@@ -251,6 +263,17 @@
background: var(--background);
}
+// Input Highlight
+// ----------------------------------------------------------------
+
+:host(.ion-touched.ion-invalid) {
+ --highlight-color: var(--highlight-color-invalid);
+}
+
+:host(.ion-touched.ion-valid) {
+ --highlight-color: var(--highlight-color-valid);
+}
+
// Input Bottom Content
// ----------------------------------------------------------------
@@ -271,6 +294,20 @@
font-size: 12px;
}
+/**
+ * If the input has a validity state, the
+ * border and label should reflect that as a color.
+ */
+:host(.ion-touched.ion-valid) .input-bottom,
+:host(.ion-touched.ion-invalid) .input-bottom {
+ --border-color: var(--highlight-color);
+}
+
+:host(.ion-touched.ion-valid) label,
+:host(.ion-touched.ion-invalid) label {
+ color: var(--highlight-color);
+}
+
// Input Hint Text
// ----------------------------------------------------------------
@@ -347,7 +384,7 @@
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
-// Input Label Placement
+// Input Label Placement - Start
// ----------------------------------------------------------------
/**
@@ -358,6 +395,9 @@
flex-direction: row;
}
+// Input Label Placement - End
+// ----------------------------------------------------------------
+
/**
* Label is on the right of the input in LTR and
* on the left in RTL.
@@ -375,6 +415,9 @@
@include margin(0, 0, 0, 8px);
}
+// Input Label Placement - Fixed
+// ----------------------------------------------------------------
+
/**
* Label is on the left of the input in LTR and
* on the right in RTL. Label also has a fixed width.
@@ -389,6 +432,9 @@
max-width: 200px;
}
+// Input Label Placement - Stacked and Floating
+// ----------------------------------------------------------------
+
/**
* Stacked: Label sits above the input and is scaled down.
* Floating: Label sits over the input when the input has no
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 6ec349c6356..e90691c66fb 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -604,6 +604,7 @@ export class Input implements ComponentInterface {
const { disabled, fill, readonly, shape, inputId, labelPlacement } = this;
const mode = getIonMode(this);
const value = this.getValue();
+ const shouldRenderHighlight = mode === 'md' && fill !== 'outline';
return (
)}
+ {shouldRenderHighlight && }
{this.renderBottomContent()}
diff --git a/core/src/components/input/test/highlight/index.html b/core/src/components/input/test/highlight/index.html
new file mode 100644
index 00000000000..29172a5af6e
--- /dev/null
+++ b/core/src/components/input/test/highlight/index.html
@@ -0,0 +1,455 @@
+
+
+
+
+ Input - Highlight
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Input - Highlight
+
+
+
+
+ No Fill, Default
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
No Fill, Floating
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
No Fill, Stacked
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Solid, Default
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Solid, Floating
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Solid, Stacked
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Outline, Default
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Outline, Floating
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+
Outline, Stacked
+
+
+
Focus
+
+
+
+
+
Valid
+
+
+
+
+
Invalid
+
+
+