Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush with each other.
I referred to the placeholder for a select HTML element as "pseudo" because there isn't a default placeholder option for a select element. Instead, the first option within the select is displayed in place of a placeholder.
In the provided screenshot, you can observe two select elements - one displaying "Country" as the first option text, and another showing "HOW SOON DO YOU WANT YOUR BOOK?" as the initial option text. Both these select elements seem to have an indentation compared to the input[type="text"] placeholder text, making it challenging to align them precisely.
https://i.sstatic.net/CDUNx.png
input[type="text"].couture-input-underline,
input[type="password"].couture-input-underline,
input[type="number"].couture-input-underline,
select.couture-input-underline
{
width: 300px;
display: block;
font-size: 22px;
border: 0px solid #7f7f7f;
border-bottom-width: 1px;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
padding: 0;
margin:0;
margin-bottom: 10px;
}
.text-match-placeholder{
color: #ACACAC;
}
select option
{
outline: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
}<select class="couture-input-underline text-match-placeholder">
<option value>Choose</option>
<option>First</option>
<option>Second</option>
</select>
<input type="text" class="couture-input-underline" placeholder="Text Box One" />