0

As you can see in the image below the "Ms." in the select (first one) is aligned differently than in the input (second one), although both have the same width and both text's alignment is set to "left.

How can I get rid of that extra space on the left inside the select tag?

Here the Snippet:

.select, .input {
  width: 45%;
  text-align: left;
  height: 1.5rem;
  background-color: transparent;
  display: block;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: mediumslateblue;
  padding: 0;
  margin-bottom: 12px;
  margin-left: 10%;
}
<input type="text" class="input" value="Hello" />
<select name="" id="" class="select">
  <option value="">Hello</option>
</select>

Different alignment

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
JackFrost
  • 83
  • 1
  • 9
  • This definitely looks like a padding issue, do you have the complete code with HTML as well to check in a sandbox so that we can see? Create a [mre] here, please? – Praveen Kumar Purushothaman Mar 07 '23 at 14:42
  • (Kinda weird to see a Title/Salutation input in a modern form today - they're kinda unfashionable now) – Dai Mar 07 '23 at 14:43
  • `width: 45%;` <-- This does not do what you think it does. Also, we need to see your outer HTML and CSS of all relevant containers, because `width: n%` is proportional to an element's parent, and you haven't shown us what the parents/containers are.# – Dai Mar 07 '23 at 14:44
  • This is a known problem with the select tag's implementation. Check the answer from the [dupe question](https://stackoverflow.com/a/27508479/) so it helps. – Praveen Kumar Purushothaman Mar 07 '23 at 14:46
  • Fun-fact: styling ` – Dai Mar 07 '23 at 14:46
  • @Dai The computed width is the same for both elements. – JackFrost Mar 07 '23 at 15:18

0 Answers0