can someone help me to fix the vertical align of the placeholders in IE for the below markup? I fixed on other browsers and looks good with transform: translateY(3px); unfortunatly the html is from a widget of my newsletters provider so I cannot change it, I only have access to css style.
If possibile I would like the checkbox to look the same in IE too, it looks like the -webkit-appearance: none; doesn't works on ie. many thanks
HTML
<input type="hidden" name="wpmailup-subscribe" class="wpmailup-subscribe" value="subscribe">
<fieldset class="subscribeDataTable">
<h4 class="widgettitle">Iscriviti alla nostra newsletter!</h4>
<p class="muDescription"></p>
<p class="muField">
<input type="text" name="sub-email" class="sub-email" placeholder="Email*">
</p>
<p class="muField">
<input type="text" name="sub-ext1" class="sub-ext1" maxlength="80" placeholder="Nome*">
</p>
<p class="muTermsCheckbox">
<label><input name="terms-confirm" class="terms-confirm" type="checkbox" value="yes"> Accetto l'informativa sulla <a class="ppaccept" href="/privacy-policy"></a></label>
</p>
</span>
<p class="muSubmit"><input type="submit" name="submit" value="iscriviti!"></p>
</fieldset>
CSS
.subscribeForm input {
border-width: 1px;
border-style: solid;
border-color: #ffd300;
padding: 16px;
line-height: 2em;
font-size: 16px;
}
You have line-height: 2em;
set on the input, this calculates differently in different browsers. Remove this line and you should see the placeholder vertically aligned on both IE and Chrome/other modern browsers.
.subscribeForm input {
border-width: 1px;
border-style: solid;
border-color: #ffd300;
padding: 16px;
/* line-height: 2em; */
}
EDIT:
Regarding the appearance
issue, -webkit-appearance
is a vendor prefix.
By switching the code to:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
This will ensure it is applied to all browsers. NOte that Edge and IE handle prefixing differently.