diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 78414b0ce86..da01ffb9916 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -216,6 +216,7 @@ // Input Wrapper // ---------------------------------------------------------------- + .input-wrapper { @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @@ -294,11 +295,12 @@ .input-wrapper label { /** - * The margin between the label and - * the input should be on the end - * when the label sits at the start. + * The padding on the label adds visual + * space between the label and the input. + * We use padding so that this space can still + * be clicked to focus the input. */ - @include margin(0, 8px, 0, 0); + @include padding(0, 8px, 0, 0); /** * This causes the label to take up @@ -341,12 +343,13 @@ } /** - * The margin between the label and - * the input should be on the start - * when the label sits at the end. + * The padding on the label adds visual + * space between the label and the input. + * We use padding so that this space can still + * be clicked to focus the input. */ :host(.input-label-placement-end) label { - @include margin(0, 0, 0, 8px); + @include padding(0, 0, 0, 8px); } /** diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index af2a5d3c8ff..6396fb58374 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -555,7 +555,7 @@ export class Input implements ComponentInterface { } private renderInput() { - const { disabled, readonly, inputId, labelPlacement } = this; + const { disabled, label, readonly, inputId, labelPlacement } = this; const mode = getIonMode(this); const value = this.getValue(); @@ -570,7 +570,7 @@ export class Input implements ComponentInterface { })} >