Align placeholder inside text field HTML

Question

I want to move my placeholder in upper-left corner.

I want something like on the image.

I've tried

::-webkit-input-placeholder {
    left: 0px;
    up: 0px;
}

But it doesn't work. I know HTML well, but I never did something like this.

Stefan Đorđević · Accepted Answer · 2016-06-14T13:22:45.233

3

I've found answer by myself! :D

So, I just changed <input> to <textarea>. With a little CSS it looks completely same as input field.

Very much thanks for everyone who tried to help me!

edited Jun 14 '16 at 13:22

answered Jan 21 '16 at 16:27

Stefan Đorđević

514
1
3
21

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

You can only use text-align: center|left|right to change the align of the input's value/placeholder.

source: https://developer.mozilla.org/de/docs/Web/CSS/text-align

Otherwise you could use padding: 0 0 0 0; to force space

source: https://developer.mozilla.org/de/docs/Web/CSS/padding

Information: up isn't valid css. the right name is top And if you want to use position attributes like: right, left, bottom or top you have to set position: absolute|fixed;

Edit: As told in here: https://stackoverflow.com/a/5677243/3119231 it is possible to set "top" value through line-height attribute

edited May 23 '17 at 11:51

Community

1
1

answered Jan 21 '16 at 15:49

Are we talking about a textarea or an input? – Jan 21 '16 at 15:53
I want to align placeholder (text) that is inside input. – Stefan Đorđević Jan 21 '16 at 16:05
This is *impossible*. You can **align** it just **left, center** or **right**. But interesting question! – Jan 21 '16 at 16:07

score 0 · Answer 3 · answered Jan 21 '16 at 15:53

I think css positioning can help. position relative or absolute. According to your container, try to give one of position styles.

EDIT: or you can use background-image instead of placeholder. and you can remove background image on mouse over with javascript.

score 0 · Answer 4 · answered Jan 21 '16 at 16:09

0

Unfortunately, you are limited to what styling can be applied to the placeholder pseudo-element.

Article

These are:

color
font-size / font-style / font-weight
letter-spacing
line-height
padding
text-align
text-decoration

Position is not one of them.

answered Jan 21 '16 at 16:09

Paulie_D

102,164
10
117
144

Not with the placeholder pseudo-element. You could try a positioned label instead. – Paulie_D Jan 21 '16 at 16:13

Align placeholder inside text field HTML

4 Answers4