Kaldır Bootstrap & Google Custom Search

Question

web sitemden aşağıdaki resimde görebilirsiniz. Sorun şu ki, Google'ın CSS'sini göremiyorum ve bu stilin nasıl geçersiz kılınacağını anlayamıyorum. (Google)

Benim kod aşağıda:

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

"kutu" sınıf için My CSS önemsizdir ama herhangi bir soru önlemek için içerecektir:

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

Bu çifte kenarlığı kaldırma konusunda herhangi bir yardımı takdir ediyorum. Teşekkür ederim!

GÜNCELLEME:

* { 
    border: none !important; 
} 

sadece Google'ın sınır kaldırıldı: Bu CSS kuralını çalıştı

. resim aşağıdaki gibidir:

Answer 1

sınır önyükleme-combined.min.css bu bölümünden uygulanır:

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

Yani sınır gölgeleri kaldırarak sizin için bu çözecektir:

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

Yoksa çok yardımcı olabilir geçersiz kılma:

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

kullanmak çatışmanın tam giderilmesi için

Answer 2

Gördüğünüz ikinci bir sınır aslında bir sınır ama bir kutu gölgesi. Bootstrap css'iniz tarafından tüm girdilere eklenir, ancak arama kutusu için istenmez. Yalnızca arama kutusu için buna dayanarak kapatmanız gerekir. sizin css için böyle bir şey ekleyin:

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

Answer 3

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

aşağıdaki CSS kullanabilirsiniz ve bu benim için çalışıyor:

.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; Metin kutusundan çıkarılan metni kaldırmak için

yapar. http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/