Remove Conflicting Styling - Bootstrap & Google Custom Search

Remove conflicting styling - Bootstrap & Google Custom Search

The border is applied from this section of 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;
}

So removing the border shadows will fix this for you:

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

Or overriding it can help too:

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

Google CSE with Twitter Bootstrap not displaying the search box correctly

I've got the same problem. It is not the best solution, but until this solution comes... it could help you. Try adding this to your CSS file with your own colours and measures:

.gsc-search-button
{
    background-color: #1a4195;
    border-radius: 5px;

}

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    background-color: #1a4195 !important;
    background-image: url("http://www.google.com/uds/css/v2/search_box_icon.png") !important;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 16px !important;
    border-color: #1a4195 !important;
    filter: none;
}

bootstrap css how to resolve conflict

1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire css of some class best to use !important property.

2.if your are using script in your code so its very easy to differentiate the css styles.

Bootstrap Is Adding Conflicting Styles To JQTree

That sure is a weird one. The problem seems to be due entirely to the jQTree styles though it might be affected by Bootstrap's default box-sizing. In any case, add these styles to your stylesheet

ul.jqtree-tree ul.jqtree_common {
    margin-left: 0;
    padding-left: 16px;
}

The problem was, those arrows were being positioned absolutely with a left: -1.5em which put them outside the parent's box. With overflow:hidden, they weren't visible.

Something in the JQTree JavaScript adds the overflow property, probably to facilitate the animation.

Bootstrap conflicts with my own css file

I am not a bootstrap expert, but .parallax and .parallax-inner sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.

If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...

Google maps conflicting with bootstrap font css in Chrome

Add this to your a links text-shadow:0 1px 2px rgba(0,0,0,.9);filter:alpha(opacity=90);opacity:.9; Demo: http://po0.co.uk/daed.php

---

Related Topics