2016-04-26 65 views
-3

我需要编辑此订阅表单,以便电子邮件框和按钮都是290px宽,并且都是居中。我也想让按钮变黑,而不是有圆边。任何人都可以帮忙吗?订阅表单CSS编辑

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/slim-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; width:290px;} 
    /* 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="//thefacefactory.us12.list-manage.com/subscribe/post?u=95d25bd530e274cd2b9abd235&amp;id=411d7026eb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 
    <label for="mce-EMAIL">The Face Factory Newsletter</label> 
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> 
    <!-- 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;" arial-hidden="true"><input type="text" name="b_95d25bd530e274cd2b9abd235_411d7026eb" tabindex="-1" value=""></div> 
    <div class="clear"><input type="submit" value="Receive Offers and Beauty Tips" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
    </div> 
</form> 
</div> 

<!--End mc_embed_signup--> 
+1

向我们展示你已经尝试过什么CSS和描述它没有正确做的事情。 – csmckelvey

回答

2

尝试增加在下面的样式到现有的CSS <style>块:

/* Target your subscribe button */ 
#mc-embedded-subscribe { 
     /* Ensure that the background is black (#000) */ 
     background-color: #000!important; 
     /* Ignore any rounded corners */ 
     border-radius: 0!important; 
} 

您可以see a working example here及以下证明:

enter image description here

+0

非常感谢你!你知道如何把所有东西放在中心位置,并使电子邮箱与其他所有东西一样大吗? – beccaboo23

+0

如果你想中心的一切,尝试使用[这些样式](https://gist.github.com/Rionmonster/d25c5af5d2652d7d15bdf2c6b35ae0b3)可以[这里看到](http://jsbin.com/kicipo/edit?html ,输出)。 –

+0

谢谢,iv'e只是试图使电子邮箱与黑色按钮的大小相同,不知道我做了什么,但它没有工作,现在正在触摸黑色按钮? – beccaboo23