CODEWITHSUNDEEP
htmlcss
Melbin Mathai
Melbin Mathai

Reputation: 507

How to move cursor small bit from left to right in a Input field

I was created a div and a input field inside of the div. In input field, I set auto focus. When page load, the cursor focusing the input field. But the cursor in touch the border, so I can't clearly see the cursor. Is any way to move the cursor from left to right. I just want, the cursor should be touch the just front of the word Add a list. The clear example is inside of Stack Overflow page and the Title area. Please give your advise. Thank you.

<div  
    style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
    <input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "  Add a List...">
</div>

Upvotes: 8

Views: 10575

Answers (4)

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14669

you can set with text-indent OR padding

input[type=text]{
  text-indent:15px;
}   

/*OR*/

input[type=text]{
  padding:0px 15px;
}
<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; ">

    <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder="  Add a List...">
</div>

Upvotes: 3

Masoud Mustamandi
Masoud Mustamandi

Reputation: 498

Use Padding-left in CSS in order to give it a padding to the left side than the cursor will automatically sets from the distance you defined.

#SAVE_LIST{
   padding-left:10px;
}

Upvotes: 0

Vatsal Shah
Vatsal Shah

Reputation: 1442

In your Placeholder you have added a space, Simply remove that space, no need to add Css here.

Please try below.

<div  style = "white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px; " >
							
							<input class = "list-name-field" id = "SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0; " type="text" name="" placeholder = "Add a List...">
							</div>

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29239

As @Rayon said, use padding style.

.list-name-field {
  padding: 0 10px;
}
<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px;">
  <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0;" type="text" name="" placeholder="Add a List...">
</div>

Upvotes: 8

Related Questions