Search code examples
cssinputplaceholdersemantic-ui-react

semantic-ui-react - form input placeholder position

I'm using the components from semantic-ui-react to display a Field and Button like below:

<Segment clearing>
    <Form>
        <Form.Group style={{ display: "flex" }}>
            <Form.Field style={{ flexGrow: "1" }}>
                <Form.Input
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    focus
                />
            </Form.Field>

            <Form.Button
                    color="green"
                    floated="right"
                    content="Add new API key"
                    type='submit'
            />
        </Form.Group>
    </Form>
</Segment>

Nothing incredibly fancy, the result is as below:

enter image description here

I want to reposition the placeholder in the Form.Input to the right side like below:

enter image description here

How exactly can I achieve this?

Solution

  • I would use the CSS placeholder selector. You could, for example, give the Form.Input component an arbitrary class such as "input-aligned-end" and then style it in CSS:

    .input-aligned-end::placeholder {
  text-align: end;
}