Mailchimp 사용자 지정 양식 CSS

Question

내 웹 사이트의 바닥 글에 대해 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%; 
} 

Answer 1

"이메일 주소"라벨

은 다른 레이블을하지 않는 동안 "라벨"의 클래스가 있습니다. 이 클래스를 삭제하면 다른 두 클래스처럼 보입니다. 이것에

<label for="mce-EMAIL" class="label">Email Address:</label> 

변경을 :

<label for="mce-EMAIL">Email Address:</label> 

그것을 찾을 수 :

이 줄을 찾기

<form action="https://www.kayakinguk.com/" method="post"><div class="mc-field-group col-lg-6"> 
    <label for="mce-FNAME">First Name:</label> 
    <input type="text" id="mce-FNAME" class="input required" name="FNAME" value=""> 
</div> 
<div class="mc-field-group col-lg-6"> 
    <label for="mce-LNAME">Last Name:</label> 
    <input type="text" id="mce-LNAME" class="input required" name="LNAME" value=""> 
</div> 

<div class="mc-field-group col-lg-8"> 
    <label for="mce-EMAIL" class="label">Email Address:</label> 
    <input type="email" id="mce-EMAIL" class="required input email" name="EMAIL" value=""> 
</div> 

의 배경 색상과 글꼴 속성을 변경 년대 .label 클래스 궁금한 점이 있으시면, 라인 5494에있는 bootstrap.css에있는 프리셋입니다.