title: Stripe Elements - adding placeholder effect to an input
body: <p>If I need to add more details let me know...</p>
  
  <p>How do I do the effect below with a <a href="https://stripe.com/docs/stripe-js/elements/quickstart" rel="nofollow noreferrer">stripe element</a> input? :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input:focus ~ .floating-label,
  input:not(:focus):valid ~ .floating-label{
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
  }
  
  .inputText {
    font-size: 14px;
    width: 200px;
    height: 35px;
  }
  
  .floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 18px;
    transition: 0.2s ease all;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input type="text" class="inputText" required/&gt;
    &lt;span class="floating-label"&gt;Your email address&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Desipte research I cannot find anything on how to pull this off. Does stripe not let you do this?</p>
  
  <p>The way I understand it is that the stripe API pulls in an iFrame with the input and it cannot be modified with JS. </p>
  
  <p>Relevant stripe code:</p>
  
  
                
                Card Number
                Please enter a valid credit card
              
  
  <pre><code>        &lt;div class="str-element-wrapper"&gt;
              &lt;div class="cvc-tooltip-trigger"&gt;&lt;/div&gt;
              &lt;div class="cvc-tooltip"&gt;
                &lt;span style="font-weight: bold;"&gt;Where is your Security Code?&lt;/span&gt;
                &lt;span&gt;Your credit card’s Security Code 
                    is a 3- or 4-digit number located 
                    on its front or back.&lt;/span&gt;
              &lt;/div&gt;
              &lt;div id="card-cvc-element" class="field"&gt;&lt;/div&gt;
              &lt;label class="signup-form-input-label" for="name"&gt;CVC (Security Code)&lt;/label&gt;
              &lt;span class="signup-form-input__error"&gt;Please enter a valid CVC&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="str-element-wrapper"&gt;
            &lt;div id="card-expiry-element" class="field"&gt;&lt;/div&gt;
            &lt;label class="signup-form-input-label" for="name"&gt;Expiration (MM / YY)&lt;/label&gt;
            &lt;span class="signup-form-input__error"&gt;Please enter a valid expiration&lt;/span&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>// Create a Stripe client.
          var stripe = Stripe("(my stripe key here)");
  
          // Create an instance of Elements.
          var elements = stripe.elements();
  
          // Custom styling can be passed to options when creating an Element.
          // (Note that this demo uses a wider set of styles than the guide below.)
          var style = {
            base: {
              color: "#32325d",
              fontFamily: '"Raleway", Raleway, sans-serif',
              fontSmoothing: "antialiased",
              fontSize: "16px",
              "::placeholder": {
                color: "#292c2e"
              }
            },
            invalid: {
              color: "#fa755a",
              iconColor: "#fa755a"
            }
          };
  
          var cardNumberElement = elements.create('cardNumber', {
            style: style,
            placeholder: '',
          });
          cardNumberElement.mount('#card-number-element');
  
          var cardCvcElement = elements.create('cardCvc', {
            style: style,
            placeholder: '',
          });
          cardCvcElement.mount('#card-cvc-element');
  
          var cardExpiryElement = elements.create('cardExpiry', {
            style: style,
            placeholder: '',
          });
          cardExpiryElement.mount('#card-expiry-element');
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code>$(".StripeElement").focus(function() {
          $(this).siblings().addClass("signup-form-input-label--focused")
      });
      $(".StripeElement").focusout(function() {
          if ($(this).val() !== "") {
              // keep state
          } else {
              $(this).siblings().removeClass("signup-form-input-label--focused");
          }
      });
  </code></pre>
  
  <p>Then added CSS:</p>
  
  <pre><code>.signup-form-input-label--focused {
          @media (max-width: $mobile-bp) {
              left: 4%;
          }
          top: 20%;
          left: 11%;
          font-size: 12px;
          color: #6d7474;
      }
  </code></pre>
  
  <p>Which makes the label smaller. </p>
  
  <p>But all that is a lost cause (I think but idk) because the inputs is being pulled in through an iFrame. </p>
  
  <p>Can I do this or no?</p>