Định vị tiện ích reCAPTCHA với CSS

Question

Tôi đang cố gắng căn chỉnh tiện ích reCAPTCHA với các trường nhập của tôi, nhưng kiểu dáng .g-recaptcha dường như không đạt được nhiều. Có ai biết về bất kỳ selectors tôi có thể sử dụng?

Form HTML:

<div class="contact-form"> 
<form role="form" method="post" action="contact-form.php"> 
    <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label> 
    <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label> 
    <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label> 
    <span>&nbsp;</span><div id="recaptcha"><div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"></div></div> 
    <label><span>&nbsp;</span><input type="submit" value="" class="submit-button" /></label>     
</form> 
</div> 

CSS: URL

.contact-form { 
    margin: 0 auto; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    max-width: 600px; 
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif; 
    font-size: 20px; 
} 

.contact-form label { 
    display: block; 
    margin: 0px 0px 15px 0px; 
} 

.contact-form label > span { 
    width: 100px; 
    text-align: right; 
    float: left; 
    padding-top: 8px; 
    padding-right: 20px; 
} 

.contact-form input, .contact-form textarea { 
    margin-bottom: 15px; 
    padding: 10px; 
    border: none; 
} 

.contact-form input.input-field { 
    width: 70%; 
    height: 20px; 
    font-size: 18px; 
} 

.contact-form .textarea-field { 
    width: 70%; 
    height: 250px; 
    font-size: 18px; 
} 

textarea { 
    resize: none; 
} 

textarea:focus, input:focus { 
    outline: 0; 
} 

#recaptcha { 
    width: 304px; 
    margin: 0; 
} 

.g-recaptcha { 
    text-align: left; 
} 

input.submit-button { 
    background-image: url("../img/submit-button.jpg"); 
    width: 225px; 
    height: 60px; 
    border: none; 
} 

Page: http://api.marioparra.me#contact.

Mọi trợ giúp sẽ thực sự được đánh giá cao!

Answer 1

Chỉ việc điều chỉnh CSS hiện tại của bạn với điều này:

.contact-form label, #recaptcha { 
    display: block; 
    margin: 0px 0px 15px 0px; 
} 
.contact-form label > span, #recaptcha::before { 
    width: 100px; 
    text-align: right; 
    float: left; 
    padding-top: 8px; 
    padding-right: 20px; 
    content:""; //Make sure you add this as well 
} 
.contact-form .textarea-field, .g-recaptcha { 
    width: 70%; 
    height: 250px; 
    font-size: 18px; 
    display: inline-block; 
} 

yếu tố giả được sử dụng ở đây để bạn không cần phải thay đổi đánh dấu của bạn. :before hoạt động như một khoảng trong nhãn, do đó cung cấp tính đồng nhất trong cấu trúc html của bạn và do đó giải quyết vấn đề liên kết

Answer 2

Để sắp xếp reCAPTCHA với phần còn lại của người kia form-fields bạn phải thay đổi DOM cấu trúc của bạn một cái gì đó như thế này:

HTML:

<label for="captcha"> 
    <span>&nbsp;</span> 
     <div id="recaptcha"> 
      ... 

sau đó cũng thay đổi/viết CSS:

#recaptcha { 
    margin: 0px; 
    width: 304px; 
    position: relative; 
    float: left; 
} 

#recaptcha iframe { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

Điều này sẽ thực hiện thủ thuật cho bạn.