{"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":"options-de-style-pour-les-elements-a-rayures-ameliorees","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/fr\/docs\/enhanced-stripe-elements-styling-options\/","title":{"rendered":"Options de style pour les \u00e9l\u00e9ments de bande am\u00e9lior\u00e9s"},"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>Cette nouvelle int\u00e9gration permettra de d\u00e9finir les css dans les feuilles de style existantes ou dans les balises de style. Les styles css suivants sont support\u00e9s (tels que d\u00e9finis par Stripe) : 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, et 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\/fr\/wp-json\/wp\/v2\/ht-kb\/8350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/users\/21411"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/comments?post=8350"}],"version-history":[{"count":1,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb\/8350\/revisions"}],"predecessor-version":[{"id":21312,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb\/8350\/revisions\/21312"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/media?parent=8350"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb-category?post=8350"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/fr\/wp-json\/wp\/v2\/ht-kb-tag?post=8350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}