Como mudar a cor do placeholder CSS?

Para mudar a cor do placeholder CSS, você pode utilizar a propriedade color em conjunto com seletores específicos que visam o placeholder. O placeholder é o texto que aparece em campos de entrada, como e , quando não há nenhum valor inserido. Para estilizar esse texto, utilizamos pseudo-elementos que permitem a personalização do estilo do placeholder.</p><div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2325749110618635" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:375px;height:315px" data-ad-client="ca-pub-2325749110618635" data-ad-slot="2545340731"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script> </div><h2>Utilizando o seletor ::placeholder</h2><p>O seletor <strong>::placeholder</strong> é a maneira mais comum de alterar a cor do texto do placeholder. Para aplicar a mudança de cor, você deve definir a propriedade <strong>color</strong> dentro desse seletor. Por exemplo:</p><pre><code>input::placeholder { color: red; }</code></pre><p>Esse código mudará a cor do placeholder para vermelho em todos os campos de entrada do tipo . É importante lembrar que a compatibilidade com navegadores pode variar, então sempre teste em diferentes plataformas.</p><h2>Compatibilidade entre navegadores</h2><p>Embora o seletor <strong>::placeholder</strong> seja amplamente suportado, é essencial considerar que alguns navegadores mais antigos podem não reconhecê-lo. Para garantir que sua estilização funcione em todos os navegadores, você pode usar prefixos específicos. Por exemplo:</p><pre><code>input::-webkit-input-placeholder { color: red; } input::-moz-placeholder { color: red; } input:-ms-input-placeholder { color: red; }</code></pre><p>Esses prefixos garantem que o estilo do placeholder seja aplicado corretamente em navegadores como Chrome, Firefox e Internet Explorer.</p><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2325749110618635" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2325749110618635" data-ad-slot="3916806739" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div><h2>Exemplo prático de estilização</h2><p>Para demonstrar como mudar a cor do placeholder CSS de forma eficaz, considere o seguinte exemplo completo:</p><pre><code>input { border: 1px solid #ccc; padding: 10px; border-radius: 5px; } input::placeholder { color: #999; font-style: italic; }</code></pre><p>Neste exemplo, além de mudar a cor do placeholder para um cinza claro, também aplicamos um estilo itálico, o que pode melhorar a legibilidade e a estética do campo de entrada.</p><div class="glossario-ninja-lead-form-container" style="background-color: #0077db; padding: 30px; margin: 35px auto; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.15); width: 100%; box-sizing: border-box; display: block;"><div class="glossario-ninja-lead-header" style="margin-bottom: 25px;"><h3 style="font-size:1.4em!important;font-weight:bold!important; margin: 0 0 12px 0!important; color: #ffffff; line-height: 1.4;">Receba mais conteúdos como este!</h3><p style="margin: 0; color: #ffffff; font-size: 18px!important; line-height: 1.5;">Cadastre-se para receber novidades sobre o mundo do desenvolvimento web.</p></div><form method="post" class="glossario-ninja-lead-form" style="margin: 0; padding: 0; width: 100%;"><div class="glossario-ninja-lead-field" style="margin-bottom: 20px;"><label for="glossario_ninja_lead_nome" style="display: block; margin-bottom: 8px; font-weight: bold; color: #ffffff; font-size: 15px;">Nome</label><input type="text" id="glossario_ninja_lead_nome" name="glossario_ninja_lead_nome" value="" style="width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 16px; line-height: 1.5; height: auto; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); transition: border-color 0.3s ease;"></div><div class="glossario-ninja-lead-field" style="margin-bottom: 20px;"><label for="glossario_ninja_lead_email" style="display: block; margin-bottom: 8px; font-weight: bold; color: #ffffff; font-size: 15px;">Email <span style="color: #d9534f;">*</span></label><input type="email" id="glossario_ninja_lead_email" name="glossario_ninja_lead_email" required value="" style="width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 16px; line-height: 1.5; height: auto; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); transition: border-color 0.3s ease;"></div><input type="hidden" name="glossario_ninja_lead_post_id" value="1945"><input type="hidden" name="glossario_ninja_lead_post_titulo" value="Como mudar a cor do placeholder CSS?"><input type="hidden" name="glossario_ninja_lead_termo_id" value="0"><input type="hidden" id="glossario_ninja_lead_nonce" name="glossario_ninja_lead_nonce" value="0d5aa35eb0" /><input type="hidden" name="_wp_http_referer" value="/glossario/como-mudar-a-cor-do-placeholder-css/" /><div class="glossario-ninja-lead-submit" style="margin-top: 25px;"><button type="submit" name="glossario_ninja_lead_submit" value="1" style="background-color: #25D366; color: #ffffff; border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600; transition: background-color 0.3s ease; min-width: 120px; display: flex; align-items: center; justify-content: center; gap: 8px;"> <span style="font-size: 18px;">✓</span>Cadastrar</button></div></form></div><h2>Dicas para uma boa experiência do usuário</h2><p>Ao mudar a cor do placeholder, é fundamental garantir que a nova cor não comprometa a <strong>legibilidade</strong>. Aqui estão algumas dicas:</p><ul><li>Escolha cores que contrastem bem com o fundo do campo de entrada.</li><li>Evite cores muito claras que possam se misturar ao fundo.</li><li>Considere a acessibilidade; utilize ferramentas de contraste para verificar a legibilidade.</li></ul><h2>Usando JavaScript para interatividade</h2><p>Se você deseja adicionar interatividade ao seu placeholder, pode usar JavaScript para alterar a cor dinamicamente. Por exemplo, você pode mudar a cor do placeholder quando o campo é focado:</p><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2325749110618635" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2325749110618635" data-ad-slot="3916806739" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div><pre><code>const inputField = document.querySelector('input'); inputField.addEventListener('focus', () => { inputField.style.setProperty('--placeholder-color', 'blue'); }); inputField.addEventListener('blur', () => { inputField.style.setProperty('--placeholder-color', 'gray'); });</code></pre><p>Esse código permite que a cor do placeholder mude para azul quando o campo é focado e retorne ao cinza quando o campo perde o foco.</p><h2>Considerações finais sobre a estilização do placeholder</h2><p>Alterar a cor do placeholder CSS é uma maneira eficaz de personalizar a aparência dos seus formulários e melhorar a experiência do usuário. Lembre-se de testar suas alterações em diferentes dispositivos e navegadores para garantir que todos os usuários tenham uma experiência consistente e agradável.</p></div><div class="glossario-related"><h3 class="glossario-related-title">Termos Relacionados</h3><div class="glossario-related-grid"><div class="glossario-related-box"><h4> Termos populares</h4><ul><li><a href="https://meusiteweb.com/glossario/manutencao-de-site/">Manutenção de Site</a></li><li><a href="https://meusiteweb.com/glossario/como-criar-um-arquivo-markdown/">Como criar um arquivo Markdown?</a></li><li><a href="https://meusiteweb.com/glossario/curso-no-code-aprenda-a-criar-sem-programar/">Curso no code</a></li><li><a href="https://meusiteweb.com/glossario/como-limitar-respostas-no-google-forms/">Como limitar respostas no Google Forms?</a></li><li><a href="https://meusiteweb.com/glossario/o-que-e-um-site-de-membros/">O que é um Site de Membros</a></li></ul></div></div></div></div><footer data-elementor-type="footer" data-elementor-id="196" class="elementor elementor-196 elementor-location-footer" data-elementor-post-type="elementor_library"><div class="elementor-element elementor-element-b62e5f2 e-flex e-con-boxed e-con e-parent" data-id="b62e5f2" data-element_type="container" data-settings="{"background_background":"classic"}"><div class="e-con-inner"><div class="elementor-element elementor-element-b5764a4 e-con-full e-flex e-con e-child" data-id="b5764a4" data-element_type="container"><div class="elementor-element elementor-element-72f25ae elementor-widget elementor-widget-image" data-id="72f25ae" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <a href="https://meusiteweb.com/"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iMTY2IiB2aWV3Qm94PSIwIDAgODAwIDE2NiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="800" height="166" data-src="https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-1024x213.png" class="attachment-large size-large wp-image-829" alt="" data-srcset="https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-1024x213.png 1024w, https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-300x62.png 300w, https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-768x159.png 768w, https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-1536x319.png 1536w, https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-2048x425.png 2048w, https://meusiteweb.com/wp-content/uploads/2024/02/Untitled-design-1-150x31.png 150w" data-sizes="(max-width: 800px) 100vw, 800px" /> </a></div></div></div><div class="elementor-element elementor-element-7811f77 e-con-full e-flex e-con e-child" data-id="7811f77" data-element_type="container"><div class="elementor-element elementor-element-7178e0f elementor-widget elementor-widget-heading" data-id="7178e0f" data-element_type="widget" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Categorias</h2></div></div><div class="elementor-element elementor-element-8d8c4b0 elementor-mobile-align-center elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="8d8c4b0" data-element_type="widget" data-widget_type="icon-list.default"><div class="elementor-widget-container"><ul class="elementor-icon-list-items"><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/categoria/blog/"><span class="elementor-icon-list-text">Blog</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/categoria/landing-page/"><span class="elementor-icon-list-text">Landing Page</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/categoria/loja-virtual/"><span class="elementor-icon-list-text">Loja Virtual</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/categoria/otimizacao/"><span class="elementor-icon-list-text">Otimização</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/categoria/site-institucional/"><span class="elementor-icon-list-text">Site Institucional</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/stories"><span class="elementor-icon-list-text">Web Stories</span> </a></li></ul></div></div></div><div class="elementor-element elementor-element-77e2651 e-con-full e-flex e-con e-child" data-id="77e2651" data-element_type="container"><div class="elementor-element elementor-element-db21ba4 elementor-widget elementor-widget-heading" data-id="db21ba4" data-element_type="widget" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Links</h2></div></div><div class="elementor-element elementor-element-1dc6276 elementor-mobile-align-center elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="1dc6276" data-element_type="widget" data-widget_type="icon-list.default"><div class="elementor-widget-container"><ul class="elementor-icon-list-items"><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/"><span class="elementor-icon-list-text">Home</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/quem-somos"><span class="elementor-icon-list-text">Quem Somos</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/contato"><span class="elementor-icon-list-text">Contato</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/politicas-de-privacidade"><span class="elementor-icon-list-text">Política de Privacidade</span> </a></li><li class="elementor-icon-list-item"> <a href="https://meusiteweb.com/termos-de-uso/"><span class="elementor-icon-list-text">Termos de Uso</span> </a></li></ul></div></div></div><div class="elementor-element elementor-element-9281e8a e-con-full e-flex e-con e-child" data-id="9281e8a" data-element_type="container"><div class="elementor-element elementor-element-d9cedea elementor-widget elementor-widget-heading" data-id="d9cedea" data-element_type="widget" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Redes Sociais</h2></div></div><div class="elementor-element elementor-element-e1202d5 e-grid-align-left e-grid-align-tablet-left e-grid-align-mobile-center elementor-shape-rounded elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="e1202d5" data-element_type="widget" data-widget_type="social-icons.default"><div class="elementor-widget-container"><div class="elementor-social-icons-wrapper elementor-grid" role="list"> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-1751860" href="https://www.instagram.com/meusite.web/" target="_blank"> <span class="elementor-screen-only">Instagram</span> <svg aria-hidden="true" class="e-font-icon-svg e-fab-instagram" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg> </a> </span> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-35225b2" href="https://www.facebook.com/profile.php?id=61556148153548" target="_blank"> <span class="elementor-screen-only">Facebook</span> <svg aria-hidden="true" class="e-font-icon-svg e-fab-facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg> </a> </span> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon- elementor-repeater-item-a26a034" href="https://twitter.com/MeuSiteWeb" target="_blank"> <span class="elementor-screen-only"></span> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M5.91992,6l14.66211,21.375l-14.35156,16.625h3.17969l12.57617,-14.57812l10,14.57813h12.01367l-15.31836,-22.33008l13.51758,-15.66992h-3.16992l-11.75391,13.61719l-9.3418,-13.61719zM9.7168,8h7.16406l23.32227,34h-7.16406z"></path></g></g></svg> </a> </span></div></div></div></div></div></div><div class="elementor-element elementor-element-65ab396 e-flex e-con-boxed e-con e-parent" data-id="65ab396" data-element_type="container" data-settings="{"background_background":"classic"}"><div class="e-con-inner"><div class="elementor-element elementor-element-0316821 e-con-full e-flex e-con e-child" data-id="0316821" data-element_type="container"><div class="elementor-element elementor-element-8eb3e7d elementor-widget elementor-widget-text-editor" data-id="8eb3e7d" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Meu Site Web ® 2025 – Todos os Direitos Reservados.</p></div></div></div></div></div></footer> <script type="speculationrules">{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/hello-elementor\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}</script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121"></p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>Utilizamos cookies para melhorar sua experiência. Ao clicar em "Aceitar" você concorda com o uso dos cookies e as políticas de privacidade do site.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-accept" aria-label="Aceitar" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#0077DB;border-color:#0077DB">Aceitar</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#f4f4f4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://meusiteweb.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyze how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC"> Save My Preferences </button> <button class="cky-btn cky-btn-accept" aria-label="Aceitar" data-cky-tag="detail-accept-button" style="color:#FFFFFF;background-color:#0077DB;border-color:#0077DB"> Aceitar </button> </div></div></div></div></script> <script src="https://meusiteweb.com/wp-content/plugins/litespeed-cache/assets/js/instant_click.min.js" id="litespeed-cache-js"></script> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-no-optimize="1">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:)?$/gm,"$1"))}return d}</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://meusiteweb.com/wp-content/litespeed/js/8727d0ab9719b4b1cbdbf51e63e801f2.js?ver=cdd3a"></script></body></html>