2014-11-24 11 views
5

Ho implementato Googles nuova casella di controllo recaptcha in questo modo:checkbox di google's recaptcha per lo styling?

<div class="g-recaptcha" data-sitekey="MY_SITE_KEY"><div> 

Quando caricato il contenuto iframe simile a questa:

<div class="rc-anchor rc-anchor-standard"> 
    ... 
</div> 

enter image description here

Qui ci sono gli stili definiti per l'aspetto attuale :

.rc-anchor-standard { 
    background: #f9f9f9; 
    border: 1px solid #d3d3d3; 
    color: #000; 
} 

Sto cercando di ottenere questo look:

enter image description here

ho aggiunto questo al mio file css:

.rc-anchor-standard { 
    background: #ffffff !important; 
    border: 0px !important; 
    color: #ffffff !important; 
} 

Lo stile non cambia mai ... ogni pensiero perché questo non è lavoro?

Grazie, -Paul

+1

http: // s tackoverflow.com/questions/217776/how-to-apply-css-to-iframe – MrPk

+1

@paul Sto affrontando lo stesso problema. Sei riuscito a risolverlo? Se sì, come? –

+0

Sto cercando di fare qualcosa di simile, voglio aggiungere i miei messaggi di errore personalizzati al div con la classe "rc-anchor-alert". Non riesco ad accedervi usando JQuery. – Bryan

risposta

-3

Per prima cosa, ti sei dimenticato un punto e virgola ';' dopo il confine,

border: 0px !important 

forse che sta cancellando il testo bianco e il codice di bordo. Lo aggiusti e vedo se qualcosa cambia.

========================================

Se questo non è un altro errore di battitura, questo potrebbe essere il motivo:

Stai chiamando qui 2 classi div separate, ma le hai scritte come div all'interno di un div.

.rc-anchor .rc-anchor-standard { 

sostituire quel^con questa v:

.rc-anchor, .rc-anchor-standard { 
+0

scusate la mancanza di due punti era un refuso durante la pubblicazione. Sfortunatamente il div è caricato tramite iframe che Google utilizza dopo che il DOM è pronto, quindi non ho accesso ad esso. – Paul

+0

Non è utile per ottenere una risoluzione dell'OQ. – Bryan

2

Questi stili sono situati all'interno di un iframe da un altro dominio (google.com), quindi nessuna possibilità per loro cambiare a causa della politica dello stesso dominio. ..

È possibile scalare il contenuto del div con recaptcha (<div id="g-recaptcha" ...)

#g-recaptcha { 
    transform: scale(1.42); 
    transform-origin: 0 0 0; 
}