Rimuovere conflitto styling - Bootstrap & Google Custom Search

Date un'occhiata alle foto qui sotto dal mio sito: www.kokorugs.comRimuovere conflitto styling - Bootstrap & Google Custom Search

Sto usando bootstarp e credo che ci sono alcuni stili CSS contrastanti.

Il problema è che non riesco a vedere il CSS di Google e non riesco a capire come sovrascrivere questo stile.

enter image description here

Il mio codice (da Google) è al di sotto:

 <aside class="box" style="padding:10px 0;"> 

      <script> 
       (function() { 
       var cx = '009058734720051694368:e41h4lf-hsk'; 
       var gcse = document.createElement('script'); 
       gcse.type = 'text/javascript'; 
       gcse.async = true; 
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
        '//www.google.com/cse/cse.js?cx=' + cx; 
       var s = document.getElementsByTagName('script')[0]; 
       s.parentNode.insertBefore(gcse, s); 
       })(); 
      </script> 
      <gcse:search></gcse:search> 


     </aside>

mio CSS per la classe "scatola" è irrilevante, ma comprenderà che per evitare qualsiasi domanda:

.box { 
background: #ffffff; 
border: 2px solid #bcd78d; 
border-radius: 15px; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
margin-top: 10px; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

Apprezzo qualsiasi aiuto nella rimozione di questo doppio bordo. Grazie!

UPDATE:

Quando ho provato questa regola CSS:

* { 
    border: none !important; 
}

unica frontiera di Google è stato rimosso. L'immagine è di seguito:

enter image description here

fonte

2013-04-11 Raphael Rafatpanah

Il confine è applicata da questa sezione del bootstrap-combined.min.css:

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { 
background-color: #FFF; 
border: 1px solid #CCC; 
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
-webkit-transition: border linear .2s, box-shadow linear .2s; 
-moz-transition: border linear .2s, box-shadow linear .2s; 
-o-transition: border linear .2s, box-shadow linear .2s; 
transition: border linear .2s, box-shadow linear .2s; 
}

Quindi rimuovere le ombre di confine risolverà questo per voi:

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

O override può aiutare anche:

-webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none;

fonte

2013-04-11 16:56:57 Omega

Buoni progressi. Dai un'occhiata a questo jsFiddle: http://jsfiddle.net/SKrTF/ ----- L'ombra è scomparsa ora, ma l'attenzione rimane e si sovrappone alla casella di Google. Qualche idea? –

Focus Rimosso: http://jsfiddle.net/SKrTF/1/ solo la sovrapposizione ora –

Grande! Basta aggiungere 'margin-top: -1px;' alla casella di input per quello. Per esempio '# gs_tti0> input {margin-top: -1px! Important;}'. Vedi qui: http://jsfiddle.net/SKrTF/3/ – Omega

Il secondo confine che state vedendo è in realtà non è un confine, ma un'ombra scatola. È stato aggiunto dal tuo cst bootstrap a tutti gli input, ma non desiderato per la casella di ricerca. Dovresti spegnerlo neutralizzandolo solo per la casella di ricerca. Aggiungere qualcosa di simile al tuo css:

.gsc-input-box input[type="text"] { 
    -webkit-box-shadow: none; 
    box-shadow: none; 
}

fonte

2013-04-11 16:56:46 Pevara

buoni progressi. Dai un'occhiata a questo jsFiddle: jsfiddle.net/SKrTF ----- L'ombra non c'è più, ma l'attenzione rimane e si sovrappone al riquadro di Google. Qualche idea? –

Focus rimosso: http://jsfiddle.net/SKrTF/1/ Solo la sovrapposizione ora –

cosa intendi per sovrapposizione? – Pevara

per la completa correzione del conflitto utilizzare

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { 
    -webkit-box-shadow: none; 
    -moz-box-sizing: content-box; 
    box-shadow: none; 
} 


input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus { 
    box-sizing: content-box; 
    line-height: normal; 
}

fonte

2014-06-27 11:02:06 user3782847

Grazie !! Non pensavo che il dimensionamento delle scatole fosse il mio nemico lì. – Salketer

Io uso il seguente CSS e funziona per me:

.gsc-input-box input[type="text"], .gsc-input-box input[type="text"]:focus, .gsc-input-box input[type="text"]:active { 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    line-height: normal; 
}

line-height: normal;

esegue il lavoro di rimozione del testo fuori dalla casella di testo.

ho anche documentato la correzione per Google ricerca personalizzata che mostra le barre di scorrimento in cerca scheda risultati qui: http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/

fonte

2014-08-30 15:35:00

Rimuovere conflitto styling - Bootstrap & Google Custom Search

risposta

Problemi correlati