0

I have a Mailchimp sign-up form with an <input> element that has placeholder text. On Chrome, Firefox, and Microsoft Edge it displays fine but on Safari (desktop and mobile) the placeholder text does not show. It is blank. Code below:

<input type="email" placeholder="Enter your email" onfocus="this.placeholder='Enter your email'" name="EMAIL" id="mce-EMAIL" class="required email" required="" aria-required="true">

I used web-kit fixes to remove the background color from the autocomplete, have white text, and add text styles.

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:active,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
  background-color: #ED3A38 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 6vw !important;
}

As well as followed this guide to change the placeholder text colour and size:

input:-webkit-autofill::first-line,
input:-internal-autofill-previewed,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
:-moz-placeholder {
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 6vw !important;
  letter-spacing: -0.057em;
}

::placeholder {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

I'm stuck on why this isn't working. Is there something I am missing?

This is the live example in production: link

Johhhn
  • 19
  • 8

3 Answers3

0

you can use this code

<textarea class="concerncommentArea" placeholder="Place you comment here"></textarea>
Mohmmad-Nikkhah
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 04 '22 at 12:26
0

Posting for future reference. For some reason in Safari, it displays under Shadow Content (User Agent) and there was an overflow applied on the input::placeholder element.

Screenshot

I overrode that with the following code:

input::placeholder {
   overflow: visible;
}

This seems to work. Strange... but if it works, it works.

Johhhn
  • 19
  • 8
0

If you have added any custom font-family, remove it from parent container which is inherited by the element it will work fine.

Ali Azeem
  • 1