Search code examples
htmlcssweb

Set the position of the caret in an input to the top left

I'm doing a webpage with full of forms for a class project, so I have this line of code:

<style>
  input {
    text-align: right;
  }
</style>
<form class="input">
  <input style=" text-align: left; padding: 370px 200px; margin-left: 1110px; position: absolute; margin-top: -600px; width: 20%;" type="tel" id="telefono" name="telefono" ><br>
</form>

What i really want its to put the cursor at the left top corner

enter image description here

instead in the center like in the image i want it like this:

enter image description here

I've tried a lot of things such as putting in the style:

<style>
  input {
    text-align: right;
    direction: ltr;
  }
</style>

or just visiting websites such us w3schools or stackoverflow as well.

Pd: if i need javascript for this I don't know how to use it because right now in class teachers didn't taught us, that's for next year.

Solution

  • This is because of the value you used for padding. You see, your input has the following inline style padding: 370px 200px which adds 370px on the vertical axis and 200px on the horizontal access.

    Set this value to something smaller (zero or 10px) and it will work as you want.

    I strongly recommend you familiarize yourself with the Box Model to understand how this work