Clash Royale CLAN TAG#URR8PPP

CSS - How to make the text entered in my input start to be displayed at top-left of the box?

I'm working in input with my html css. I would know how to make that, when I enter a text in my box, the text start to be displayed at the top-left of my box ?

Currently it is displayed at the center of my box, here a tiny reproducible example of my work:

/*** messages ***/
.messages_flow
grid-area: messages_flow;
width: 85%;
height: 85% ;
border-radius: 10px;
overflow-y: auto;
margin: auto;
display:flex;
flex-direction : column;
align-items: end;
justify-content: flex-end;
background-color: white;
padding-top: 1em;
padding: 15px 10px ;
/* padding-bottom: 15px; */



.message_form
grid-area: message_form;
width: 16.76em ;

word-wrap: break-word;
/* margin-top: 5em; */
display:flex;
justify-content: center;
align-items: center;


.message_form input[name="message"]
text-align: end;
width: 16.76em ;
height: 4em;
justify-self: start;
margin-right: 1em;
margin-top: 0.5em;

form, input
border-radius: 10px;


<form
class="message_form"
onSubmit=this.send
>
<input
name="message"
type="text" />
<input id="send" type="submit" value="Send" />
</form>

Any hint would be great,
Thanks

text-align: end

.message_form input[name="message"]

3 Answers
3

Just erase the text-align: end; from your inputs CSS.

text-align: end;

For top (and left) alignment you would need to use a textarea element, not a regular text input.

textarea

/*** messages ***/
.messages_flow
grid-area: messages_flow;
width: 85%;
height: 85% ;
border-radius: 10px;
overflow-y: auto;
margin: auto;
display:flex;
flex-direction : column;
align-items: end;
justify-content: flex-end;
background-color: white;
padding-top: 1em;
padding: 15px 10px ;
/* padding-bottom: 15px; */



.message_form
grid-area: message_form;
width: 16.76em ;

word-wrap: break-word;
/* margin-top: 5em; */
display:flex;
justify-content: center;
align-items: center;


.message_form input[name="message"]
width: 16.76em ;
height: 4em;
margin-right: 1em;
margin-top: 0.5em;

form, input
border-radius: 10px;


<form
class="message_form"
onSubmit=this.send
>
<input
name="message"
type="text" />
<input id="send" type="submit" value="Send" />
</form>

If you need multiple lines, you could use a textarea element instead. Then the cursor would start at the top left.

<textarea name="message" />


If you only need left alignment, then removing the text-align: center line would do the trick.

text-align: center

Another option, if you want to have an input element with only one line is, instead of using height to make the text element taller, you can add padding to the top and bottom of the element but add more to the bottom. For example:

#message
padding-top: 5px;
padding-bottom: 15px;


<input id="message" type='text' name='message'>

I think the best you can do is add text-align: left; (or remove your text-align in your input CSS as Johannes suggested) to your input but I can't think of a way to vertically align an input's contents to the top using my knowledge of CSS. However, you can style a <textarea></textarea> much easily to meet your requirement. Hope this helps.

text-align: left;

<textarea></textarea>

/*** messages ***/
.messages_flow
grid-area: messages_flow;
width: 85%;
height: 85% ;
border-radius: 10px;
overflow-y: auto;
margin: auto;
display:flex;
flex-direction : column;
align-items: end;
justify-content: flex-end;
background-color: white;
padding-top: 1em;
padding: 15px 10px ;
/* padding-bottom: 15px; */



.message_form
grid-area: message_form;
width: 16.76em ;

word-wrap: break-word;
/* margin-top: 5em; */
display:flex;
justify-content: center;
align-items: center;


.message_form textarea[name="message"]
width: 16.76em ;
height: 4em;
margin-right: 1em;
margin-top: 0.5em;
resize: none;


form, input, textarea
border-radius: 10px;


<form class="message_form" onSubmit=this.send>
<textarea name="message" rows="1"></textarea>
<input id="send" type="submit" value="Send" />
</form>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.