entfernen Styling in Konflikt - Bootstrap & Google Custom Search

Question

Werfen Sie einen Blick auf das Bild unten von meiner Website: www.kokorugs.com

Ich bin mit Bootstrap, und ich glaube, dass es einige widersprüchliche CSS-Stile.

Das Problem ist, dass ich Googles CSS nicht sehen kann und nicht herausfinden kann, wie man dieses Styling überschreibt.

Mein Code (von Google) unter:

 <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> 

Meine CSS für die "Box" Klasse ist irrelevant, aber ich werde schließen es irgendwelche Fragen zu vermeiden:

.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; 
} 

Ich freue mich über jede Hilfe beim Entfernen dieser doppelten Grenze. Vielen Dank!

UPDATE:

Wenn ich diese CSS-Regel versucht:

* { 
    border: none !important; 
} 

nur Grenze von Google entfernt wurde. Das Bild ist unter:

Answer 1

Die Grenze von diesem Abschnitt der Bootstrap-combined.min.css angewendet wird:

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; 
} 

die Grenze Schatten So entfernen beheben wird dies für Sie:

-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); 

oder überschreiben kann es helfen, zu:

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

Answer 2

Die zweite Grenze Sie sehen in der Tat ist keine Grenze, sondern ein Feld Schatten. Es wird von Ihrem Bootstrap CSS zu allen Eingaben hinzugefügt, aber nicht für das Suchfeld gewünscht. Sie sollten es ausschalten, indem Sie es nur für das Suchfeld ablehnen. Fügen Sie etwas zu Ihrem CSS:

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

Answer 3

für eine vollständige Korrektur des Konflikts

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; 
} 

Answer 4

Ich benutze das folgende CSS verwenden und es funktioniert für mich:

.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;

erledigt die Arbeit des Entfernens des Textes, der aus Textkasten heraus knallt.

Ich habe dokumentiert auch das Update für Google benutzerdefinierte Suche Bildlaufleisten in den Suchergebnissen Tab angezeigt: http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/