search

stripe-archive / react-stripe-elements

Moved to stripe/react-stripe-js.
https://github.com/stripe/react-stripe-js
MIT License
3.03k stars 319 forks source link

Elements not applying textAlign style to input placeholder on IE11 #478

Closed summermin closed 3 years ago

summermin commented 4 years ago

Summary

CardNumberElement, CardExpiryElement, and CardCVCElement (and potentially others) are not getting the textAlign style applied to the input placeholders on Internet Explorer 11. textAlign works fine on the input itself, it's only the ::placeholder that it is not getting applied to. Example implementation:

<CardNumberElement
  style={{
    base: {
      textAlign: 'right',
      fontSize: '14px',

      '::placeholder': {
        textAlign: 'right',
        color: '#a1a1a1',
      },
    },
  }}
  placeholder="0000 0000 0000 0000"
/>

Other information

IE11:

Screen Shot 2019-12-18 at 6 05 59 PM

Chrome: Screen Shot 2019-12-18 at 6 12 37 PM

Works fine on all other browsers. Other style attributes like color also working fine on the placeholder in IE11. Tested using v2 and v6 of react-stripe-elements

sashko-stripe commented 3 years ago

Closing this as this project has migrated to React Stripe.js as of early 2020, which also has a somewhat different API. If you believe this is still important, please re-open it there.