diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css index 19bcf8fbab..332805b3c6 100644 --- a/src/liquid/components/ld-input/ld-input.css +++ b/src/liquid/components/ld-input/ld-input.css @@ -286,15 +286,19 @@ ld-input, } } -:where(.ld-input__placeholder) { - pointer-events: none; +.ld-input__placeholder { position: absolute; + display: flex; + height: 100%; + align-items: center; + pointer-events: none; color: var(--ld-col-rblck4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; right: var(--ld-input-padding-x); left: var(--ld-input-padding-x); + margin-right: 0; [disabled] & { opacity: 0.25; diff --git a/src/liquid/components/ld-input/readme.md b/src/liquid/components/ld-input/readme.md index 28a4a2061e..8bad790ea4 100644 --- a/src/liquid/components/ld-input/readme.md +++ b/src/liquid/components/ld-input/readme.md @@ -107,17 +107,11 @@ This component can be used in conjunction with the [`ld-label`](/liquid/componen {% example %} - -
- -
- -
{% endexample %} ### Type password @@ -726,6 +720,19 @@ The `ld-input` web component does not provide any properties or methods for vali | `"start"` | The purpose of this slot is to add icons or buttons to the input, __justifying the item to the end of the component__. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right. | +## Dependencies + +### Used by + + - docs-search + +### Graph +```mermaid +graph TD; + docs-search --> ld-input + style ld-input fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*