CODEWITHSUNDEEP
htmlcss
klavyeadam
klavyeadam

Reputation: 123

How to put space to text in <input>

I want to put left and right space to text inside of as you can see on image. I was able to put left space with text-indent but it doesn't seem to work for right space.

Can anyone help me? sample image

Upvotes: 0

Views: 16099

Answers (5)

lalithkumar
lalithkumar

Reputation: 3540

if you want it in one text box then add class like below and use it in the css

<input type='text' name='firstname' class='space'>
    .space
    {
        padding-left : 10px;
        padding-right: 10px;
    }

If you want both side you can use padding only.If you use like this it will work when you have appropriate space in the window.If you want to keep the space in at any screen size you can use border-box.

.space
{
    padding-left : 10px;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Upvotes: 1

Vincent F
Vincent F

Reputation: 27

You can set some padding to your input text :

input {
  padding: 0 5px /* 0 is for top and bottom | 5px is for left and right */
}

Here the doc on the CSS padding property : https://www.w3schools.com/css/css_padding.asp

Upvotes: 0

Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

please try following code

input{
    border: none;
    padding: 10px;
    margin: 10px;
    height: 20px;
    width: 500px;
    border:1px solid #eaeaea;
    outline:none;
}
input:hover{
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9;
}
input:focus{
    border-color:#4d90fe;
}
<div class="mainDiv">
<input type="text" />
</div>

Upvotes: 0

hallleron
hallleron

Reputation: 1992

Well one option would be to combine text-indent with a padding if your markup allows it:

text-indent: 10px;
padding-right: 20px;

Another method I guess could be the "direction" attribute with a value of "rtl" in combination with "text-align:left".

Upvotes: 0

Archana
Archana

Reputation: 103

Here inputs can have left right padding to act for indent.

input {padding: 0 5px}

So above inputs will carry 5px of space inside to both left and right.

Upvotes: 1

Related Questions