Question 201195 in Html Question posted in
Some basic documentation can be found here.

Html – How to move the beggining of the input in CSS?

I’ve styled the field of the input and i need it to start a little bit righter, as for now it looks really dumb. here what i have, and what i want to have, like move it little bit righter

<label><big><bold>Write the weight in Kilograms:</bold></big></label>
            <input placeholder="Type here:" type="text" id="inputOfKilos">

#inputOfKilos {
    color: #ffffff;
    font: 14px/40px "Proxima Nova", sans-serif;
    background: burlywood;
    border-radius: 20px;
    cursor: pointer;
    border: rgb(254, 144, 0);
}
#inputOfKilos::placeholder {
    color: #fff;
    position: relative;
    left: 12px;
}

I tried to Google it, but found nothing, also i’ve asked GPT but got the same result. I’ll be really happy if you helped.

Tags:

2

Answers


  1. 0

    It is very simple add padding-left:14px; in code css

    #inputOfKilos {
    color: #ffffff;
    font: 14px/40px "Proxima Nova", sans-serif;
  padding-left:14px;
    background: burlywood;
    border-radius: 20px;
    cursor: pointer;
    border: rgb(254, 144, 0);
}
#inputOfKilos::placeholder {
    color: #fff;
    position: relative;
    left: 12px;
}
    <label><big><bold>Write the weight in Kilograms:</bold></big></label>
            <input placeholder="Type here:" type="text" id="inputOfKilos">
    Login or Signup to reply.
  2. 0

    you are using "strange" html tag, bold, big !!!
    instead of putting placeholder with left 12px, pur 1 in input padding

    *,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#inputOfKilos {
  color: #ffffff;
  font: 14px/40px "Proxima Nova", sans-serif;
  background: burlywood;
  border-radius: 20px;
  cursor: pointer;
  border: rgb(254, 144, 0);
  padding-left: 1em;
}

#inputOfKilos::placeholder {
  color: #fff;
  position: relative;
  left: 0;
}
    <label style="font-weight: bold;font-size: 1.25em">
    Write the weight in Kilograms:
</label>
<input placeholder="Type here:" type="text" id="inputOfKilos">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search