CODEWITHSUNDEEP
inputtextboxpadding
Said Nematov
Said Nematov

Reputation: 91

CSS/HTML - How to set inner padding inside input?

When I try to set a padding it's not center anymore. It moves to the other side.

How can I set padding of the textbox input so that it's still aligned center? 

table {
  text-align: right;
}
#textfield {
  float: left;
}
.textbox { 
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.44); 
  color: #333; 
  border: 1px solid #A4A4A4;
  padding-left: 5px;
  line-height: 1; 
  width: 225px; 
  height: 18px;
  border-spacing: 8px;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
  <tbody>
    <tr>
      <td width="225"><label>First Name:</label></td>
      <td width="225">
        <input class="textbox" type="text" name="textfield" id="textfield">
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 9

Views: 20702

Answers (1)

Oriol
Oriol

Reputation: 288100

You can try adding

.textbox { 
  box-sizing: border-box;
}


table {
  text-align: right;
}
#textfield {
  float: left;
}
.textbox { 
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.44); 
  color: #333; 
  border: 1px solid #A4A4A4;
  padding-left: 5px;
  line-height: 1; 
  width: 225px; 
  height: 18px;
  border-spacing: 8px;
  box-sizing: border-box;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
  <tbody>
    <tr>
      <td width="225"><label>First Name:</label></td>
      <td width="225">
        <input class="textbox" type="text" name="textfield" id="textfield">
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 18

Related Questions