Inconsistency in styling Options list compared to Input box - css

Question

I have the following code in which I am seeing an inconsistency in styling between the styling of the placeholder text in the email input box and the styling of the content of the options box, this is especially seen in Firefox where the content of the options box appears bold in comparison to the "Email" placeholder text. I'm wondering if it is possible to get a more consistent look between the two whilst keeping the same font family and font size.
html:
<input type="email" name="email" placeholder="Email">
<br />
<select>
<option selected>Option 1</option>
</select>
css:
input[type=email] {
width: 320px;
height: 20px;
background-color: #E9F2F9;
border: none;
margin-top: 20px;
margin-left: 20px;
padding-top: 8px;
padding-bottom: 12px;
padding-left: 9px;
position:relative;
}
select {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.02px;
width:329px;
height:40px;
padding-left:9px;
padding-top:8px;
padding-bottom:12px;
background: #E9F2F9;
color:#666666;
border:none;
display: inline-block;
cursor:pointer;
position: relative;
margin-left: 20px;
margin-top: 20px;
}

Answer 1

If you want to adjust the placeholder styling you can use the pesudo-class selector ::placeholder in addition to the input selector input[type=email].
If you want to adjust the option styling you can use the option.
This way you can synchronize the styling of the elements:
option, input[type=email]::placeholder {
font-family: Helvetica;
text-transform: Uppercase;
font-size: 1em;
background-color:yellow;
}
Of course you can use whatever properties you wish. This will allow you to override any browser defaults which might affect the look differently.
Here is some more info about pseudo-classes:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
They can be extremely useful so going over some of them to at least get a sense of what's available is highly recommended.
For some more help with cross-browser quirks i also recommend checking out the normalize library:
http://nicolasgallagher.com/about-normalize-css/
EDIT:
select, option, input[type=email]::placeholder {
color: black;
font-family: Helvetica;
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
}