Mailchimp CSS를 삽입하십시오.

Question

내 웹 사이트에 메일 체임버를 삽입하려고합니다. 전자 메일을 입력하고 버튼을 구독하기 만하면됩니다. 이 페이지의 하단에 그것을 볼 수 있습니다 : 내가 가입의 투명한 배경을 가지고 노력하고

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" 
rel="stylesheet" type="text/css"> 
<style type="text/css"> 
    #mc_embed_signup{background:#fff; clear:left; font:14px 
Helvetica,Arial,sans-serif; } 
/* Add your own MailChimp form style overrides in your site stylesheet 
or in this style block. 
    We recommend moving this block and the preceding CSS link to the 
HEAD of your HTML file. */ 
</style> 
<div id="mc_embed_signup"> 
<form action="https://lovesometea.us13.list-manage.com/subscribe/post? 
u=ac5a13ceef4b95430e423c8ea&amp;id=b50d604a2b" method="post" id="mc- 
embedded-subscribe-form" name="mc-embedded-subscribe-form" 
class="validate" target="_blank" novalidate> 
<div id="mc_embed_signup_scroll"> 
<div class="mc-field-group"> 
<label for="mce-EMAIL">Email Address </label> 
<input type="email" value="" name="EMAIL" class="required email" 
id="mce-EMAIL"> 
</div> 
<div id="mce-responses" class="clear"> 
    <div class="response" id="mce-error-response" style="display:none"> 
</div> 
    <div class="response" id="mce-success-response" 
style="display:none"></div> 
</div> <!-- real people should not fill this in and expect good 
things - do not remove this or risk form bot signups--> 
<div style="position: absolute; left: -5000px;" aria-hidden="true"> 
<input type="text" name="b_ac5a13ceef4b95430e423c8ea_b50d604a2b" 
tabindex="-1" value=""></div> 
<div class="clear"><input type="submit" value="Subscribe" 
name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
</div> 
</form> 
</div> 
<!--End mc_embed_signup--> 

, 그리고 주위에 녹색 상자 : 여기 http://db1.15a.myftpupload.com/bennetts-tea/

은 엠씨 양식에 대한 코드입니다 입력 필드. 이것은 제가 시도한 CSS입니다. Chrome inspector 도구에서 작동하지만 웹 사이트에 아무 것도 변경하지 않으면 적용됩니다. 나는 뭔가를 놓치고 있는가? (분명히 나는 ​​그런가?)

.div#mc_embed_signup { 
background: transparent; 
} 

.label[for=mce-EMAIL] { 
display: none; 
} 

#mce-EMAIL { 
border: 3px solid #4EAAC1; 
display: none; 
} 

#mc-embedded-subscribe-form { 
background: transparent; 
} 

Answer 1

CSS를 사용하면 다른 무엇보다 우선 순위를 취하는 것에 대해 신중해야합니다. 특정 규칙은 광범위한 규칙보다 우선하며 나중에 규칙은 이전 규칙보다 우선합니다. #mc_embed_signup .mc-field-group input이 #mce-EMAIL 우선 순위를 가지고 있기 때문에

입력 테두리 녹색되지 않습니다 :

당신은이 문제를 가지고있다. 이 문제를 해결하려면 CSS 규칙을보다 구체적으로 지정해야합니다. #mc_embed_signup #mce-EMAIL

배경이 HTML 조각의 시작 부분에있는 규칙에 의해 무시되므로 배경이 투명하지 않습니다. 다음 줄을 제거하십시오 : #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } (또는 <style> 블록을 완전히 제거하십시오)