我为我的网站的页脚创建了一个MailChimp表单,我用一些帮助修改了CSS以使它看起来如何。我现在已经卡住了,我附上了两张图片,第一张是我想要的样子,第二张是当前代码的样子。Mailchimp自定义表单CSS
一些帮助指向我在正确的方向将不胜感激。
<div class="row">
<div class="mc-field-group col-lg-6">
<label for="mce-FNAME">First Name:<span class="asterisk"></span></label>
<input type="text" value="" name="FNAME" class="input required" id="mce-FNAME">
</div>
<div class="mc-field-group col-lg-6">
<label for="mce-LNAME">Last Name:<span class="asterisk"></span></label>
<input type="text" value="" name="LNAME" class="input required" id="mce-LNAME">
</div>
</div><!--row-->
<div class="row">
<div class="mc-field-group col-lg-8">
<label class="label" for="mce-EMAIL">Email Address<span class="asterisk"></span></label>
<input type="email" value="" name="EMAIL" class="required input email" id="mce-EMAIL">
</div>
<div class="col-lg-4">
<input type="submit" value="Submit" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div><!--row—>
.mc4wp-form .input {
margin: 10px 0;
float: left;
width: 100%;
line-height: 25px;
border: 1px solid #000;
border-radius: 10px;
}
.mc4wp-form .input:focus,
.mc4wp-form .button:focus {
outline: none;
}
.mc4wp-form .button {
color:#ffffff;
margin-top: 34px;
display: block;
width: 100%;
background: #2451f4;
height: 30px;
font-size: 15px;
border-radius: 10px;
outline: none;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.mc4wp-form .button:hover {
cursor: pointer;
background: #000;
color: #fff;
}
.mc4wp-form {
width: 100%;
max-width: 470px;
}
.mc4wp-form .mc-field-group label {
display: block;
font-size: 22px;
}
.mc4wp-form .row {
display: block;
float: left;
width: 100%;
}
.mc4wp-form .col-lg-6,
.mc4wp-form .col-lg-8,
.mc4wp-form .col-lg-4 {
float: left;
padding: 12px;
box-sizing: border-box;
}
.mc4wp-form .col-lg-6 {
width: 50%;
}
.mc4wp-form .col-lg-8 {
width: 80%;
}
.mc4wp-form .col-lg-4 {
width: 20%;
}
我给你一个提示:你需要重写mailchimps自己的CSS(这不在WP style.css中)...并继续尝试! – maioman 2015-02-07 22:44:56
@maioman正是这么说的。如果您链接到您的网站,我们可以向您显示您需要编辑的内容。 – user3781632 2015-02-07 22:50:48
@ user3781632 https://www.kayakinguk.com/我已经设法走近了几步,但仍然有点卡住了。 – 2015-02-07 23:50:11