2016-04-26 61 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