स्टाइल परस्पर विरोधी निकालें बूटस्ट्रैप और Google कस्टम खोज

Question

मेरी वेबसाइट से नीचे चित्र पर एक नजर डालें।

समस्या यह है कि मैं Google के सीएसएस को नहीं देख सकता और यह पता नहीं लगा सकता कि इस स्टाइल को ओवरराइड कैसे किया जाए।

मेरे (गूगल से) कोड के नीचे है:

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

"बॉक्स" वर्ग के लिए मेरे सीएसएस अप्रासंगिक है लेकिन मैं इसे किसी भी सवाल से बचने के लिए शामिल होंगे:

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

मैं इस डबल सीमा को हटाने में किसी भी मदद की सराहना करता हूं। धन्यवाद!

अद्यतन:

मैं इस CSS नियम की कोशिश की:

* { 
    border: none !important; 
} 

केवल Google की सीमा हटा दिया गया था। चित्र के नीचे है:

Answer 1

सीमा बूटस्ट्रैप-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; 
} 

तो सीमा छाया को दूर करने के लिए आप सही कर देंगे:

-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-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 

Answer 2

दूसरी सीमा आप देख रहे हैं वास्तव में एक सीमा नहीं है, लेकिन एक बॉक्स छाया है। यह आपके बूटस्ट्रैप सीएसएस द्वारा सभी इनपुट में जोड़ा जा रहा है, लेकिन खोज बॉक्स के लिए वांछित नहीं है। आपको केवल खोज बॉक्स के लिए इसका सामना करके इसे बंद करना चाहिए। कुछ इस तरह अपने सीएसएस में जोड़ें:

.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

मैं निम्नलिखित सीएसएस का उपयोग करें और यह मेरे लिए काम करता है:

.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: सामान्य;

टेक्स्ट बॉक्स से बाहर निकलने वाले पाठ को हटाने का काम करता है। http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/