{"id":8350,"date":"2023-08-16T09:14:26","date_gmt":"2023-08-16T16:14:26","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&#038;p=8350"},"modified":"2025-09-19T09:27:09","modified_gmt":"2025-09-19T13:27:09","slug":"erweiterte-optionen-fur-die-gestaltung-von-streifenelementen","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/de\/docs\/enhanced-stripe-elements-styling-options\/","title":{"rendered":"Erweiterte Styling-Optionen f\u00fcr Streifenelemente"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This new integration will allow the ability to define css in existing style sheets or in style tags. The following css styles are supported (as defined by Stripe):<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>font-family<\/em>,&nbsp;<em>font-size<\/em>,&nbsp;<em>font-smoothing<\/em>,&nbsp;<em>font-style<\/em>,&nbsp;<em>font-variant<\/em>,&nbsp;<em>font-weight<\/em>,&nbsp;<em>icon-color<\/em>,&nbsp;<em>line-height<\/em>,&nbsp;<em>letter-spacing<\/em>,&nbsp;<em>text-align<\/em>,&nbsp;<em>text-decoration<\/em>,&nbsp;<em>text-shadow<\/em>,&nbsp;<em>text-transform<\/em>, and&nbsp;<em>color<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can further define each action as a style in the #[div-id] .mm-stripe-elements-container .[action] where [div-id] can be #mm_field_cc_number_div, #mm_field_cc_cvv_div, or #mm_field_cc_exp_div and action can be base, invalid, or complete.<br><br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#mm_field_cc_number_div .mm-stripe-elements-container .complete {\n    font-size: 42px;\n    font-family: Verdana;\n    color: yellow;\n    line-height: 50px;\n} <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Placeholder to Stripe Fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Placeholder text within the fields can be placed using this CSS:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#mm_field_cc_number_div .mm-stripe-elements-container .base {\n  content: \"Card Number\";\n}\n#mm_field_cc_exp_div .mm-stripe-elements-container .base {\n  content: \"Expiration\";\n}\n#mm_field_cc_cvv_div .mm-stripe-elements-container .base {\n  content: \"Security Code\";\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Certain elements can be adjusted around the field. Here are more examples:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.StripeElement {\n    background: #fafafa;\n    box-shadow: 0px 0px 0px #fff;\n    height: 53px;\n    border-radius: 0px 0px 0px 0px;\n    width: 100% !important;\n    animation: 0s ease 0s 1 normal none running none;\n    border: 1px solid rgb(228, 228, 228) !important;\n    padding: 14px 8px;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Diese neue Integration erm\u00f6glicht die Definition von CSS in bestehenden Style Sheets oder in Style Tags. Die folgenden CSS-Stile werden unterst\u00fctzt (wie von Stripe definiert): font-family, font-size, font-smoothing, font-style, font-variant, font-weight, icon-color, line-height, letter-spacing, text-align, text-decoration, text-shadow, text-transform, and color....<\/p>","protected":false},"author":21411,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[205],"ht-kb-tag":[],"class_list":["post-8350","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-stripe"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb\/8350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/users\/21411"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/comments?post=8350"}],"version-history":[{"count":1,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb\/8350\/revisions"}],"predecessor-version":[{"id":21312,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb\/8350\/revisions\/21312"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/media?parent=8350"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=8350"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=8350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}