vertical align placeholder in ie

Question

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;
}

Toby · Accepted Answer · 2018-11-06T18:18:19.553

0

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.

edited Nov 06 '18 at 18:18

answered Nov 05 '18 at 18:22

Toby

12,743
8
43
75

no my friend I have already tried this with no success, consider that the placeholder is stilized through ::placeholder pseudo element and you can't inspect this in chrome inspector if you don't enable Show user agent shadow DOM in chrome settings – silvered.dragon Nov 05 '18 at 18:31
It works. [screenshot.](https://pasteboard.co/HLNoXNz.png). The placeholder text line height won't be different from the input text line height. – Toby Nov 05 '18 at 18:37
ok I will try in a few hours and I post the results sorry but in this particular moment Im out of my office.. any way thank you so much hope thia will fix the issue – silvered.dragon Nov 05 '18 at 18:40
If this isn't what you're looking for, then I'd probably wait until you had uploaded a code snippet to get a better idea of what you're looking for. – Toby Nov 05 '18 at 18:41
My friend your simple suggestions fixed my issue, I didn't notice that line height before! Can you please tell me if you have another suggestion for fixing the -webkit-appearance: none; that I have applied to the checkbox, cause it doesn't works on ie and I cannot style the checkbox, other browsers wors fine! – silvered.dragon Nov 05 '18 at 22:21
Many thanks. I've added an explanation regarding the appearance issue, let me know if this fixes your issue. – Toby Nov 06 '18 at 18:18
unfortunately I have already tried every suggested prefix but no one is working with ie or edge. I think that there is no workaround for this – silvered.dragon Nov 06 '18 at 18:49
what is it that you're expecting to see that you don't see? – Toby Nov 06 '18 at 18:56
I'm expecting that the checkbox will look like chrome or firefox, different color size and border – silvered.dragon Nov 06 '18 at 19:13
Ah.. take a look through [this thread](https://stackoverflow.com/questions/37727220/custom-checkboxes-dont-display-correctly-on-ie11-and-firefox) for some advice on how to tackle checkboxes. – Toby Nov 06 '18 at 19:16

vertical align placeholder in ie

1 Answers1