I try to override Bootstrap styles and all works perfect. But I noticed that when the user presses a primary button
<button class="btn btn-primary">Test</button>
It shows an blue outline and I can't remove it. I tried to override a class:
.btn:focus {
outline: none;
}
But it doesn't work. It still shows this f***ing blue outline. And I can't find where it declared because I am a noobie in CSS.
P.S. If it can help I use the Chrome browser v.56.
Not the best way, but try !important.
I guess your bootstrap-styles are loaded after your other styles so you get overwritten.
EDIT: also consider using more precise selector´s would be a better way to go (see comment)
also check this
There are some ways to achieve that. These ways intended to uprise specificity of selector. The easiest way is to use !important for css rule:
.btn:focus { outline: none !important; }
Try this:
Worked for me. It's box shadow
.btn-outline-primary:focus, .btn-outline-primary.focus {
box-shadow: unset !important;
}
Related
i got a little css problem, when i try to change something for just specific page or post. Like in this case i would like to change the background color of the entry content of page number 2458. And its working
#post-2458 .entry-content {
background-color: #fff;
}
But right here i use same logic and i try to change the col 8 background color for page 2458, but it does not workss. Sure if i do it without #post-2458 it changes, but it changes for all pages and i would like to do that only for page of that id.
#post-2458 .col-md-8 {
background-color: #fff;
}
Am i missing something out? could you advice how to adjust that code pls? BTW im using custom css plugin to put in that codes.
Thank you
Try overriding it with this:
#post-2458 .col-md-8 {
background-color: #fff!important;
}
Try add some id to div which you want to change and operate directly on id. Don't use col-md-8 to avoid troubles. When you want to make changes only for one element id is the best option and I has a bigger importance than class and don't use !important if you can fix something smarter.
If I were you I would do few things:
Add !important to see if it's all about the style weights.
#post-2458 .col-md-8 {
background-color: #fff !important;
}
Go to inspect tab of your browser and check which styles overrides yours or which styles you just overridden. In most cases you can override other styles just by correct reference.
For example this might NOT work:
#post-2458 .col-md-8 {
background-color: #fff;
}
But this could work, since maybe you are trying to override background-color given by the reference .col-md-8.sidebar-right
#post-2458 .col-md-8.sidebar-right {
background-color: #fff;
}
There are lots of maybe's, since it is hard to give you proper solution without a link to the website in which your problem occurs. Check the weights and make sure to override correct styles. I hope it helps!
I can't get colored Glyphicons to print in the color I've set. It's printed black.
<i class="glyphicon glyphicon-time text-success"></i>
I had the same problem when printing normal text but I've added !important in the CSS file like so:
.text-success {color:#688c2a !important}
I've also tried to add it to it's parent but with the same result. It looks good on screen. I am using Bootstrap 3.
CSS media is set to all and I've made sure of no cache with use of PHP ?t=time(); after the CSS-file.
Any ideas on how to get it to work on Glyphicons as well?
Stay away from !important unless absolutely necessary. Bootstrap 3 has a media query for print styles, it's inheriting this style for glyphs:
#media print *, :after, :before {
color: #000!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
As you can see they are already enforcing !important. Create your own print media query that's more specific using a class name instead of just the asterisk which means everything.
#media print .text-success {
color:#688c2a !important;
}
If it still doesn't override the style then use !important. Key is to use the print media query for something like this.
I got the same problem. Actually, in the Bootstrap stylesheet you have
#media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
...
}
The fragment above comes from original Bootstrap CSS file, do not copy-paste this, it will not solve the problem. This makes every symbol (including glyphicons) black when printing. The only solution I found is to remove this section from the bootstrap CSS stylesheet. After doing this, I am able to print the designed page with proper colors to a PDF file using a PDF printer from my browser.
By the way, this allows to recover all background colors and shadows that are overridden too (they are, however, recoverable using your own definitions with #media print and !important according to other posts).
An inconvenient of such a solution is that once you update your Bootstrap version, you will need to perform the same (manual) operation to keep printing fixed.
UPDATE: As it is proposed by Andreas in his answer, it is not necessary to remove the whole section "#media print". It is actually enough to remove the following line from this section, if you only want to make the glyphicons right-colored:
color: #000 !important;
Ok, so I've tried the suggested solutions but I couldn't get it to work.
I finally had to go to Bootstraps own #media print settings and remove
color:#000 !important
So strange that I only could get the color to print on text before removing that line. I don't know if there is a better solution out there but this is how I solved it.
Thanks for everyones input!
If color is right on screen and wrong in prints, you probably need to find css rules for prints.
Try looking for media-query "#media print" in your stylesheets. Probably you will find the wrong color rule somewhere below it.
the code seem to be right and working find on my end. try to clear your cache and cookies of the browser.
and if still the problem arises try to change it with jquery
$('.text-success').css('color', 'red');
Printing style-sheets can have such issues. Which browser are you using to print?
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Try adding this code to your style-sheet. Also, please check your format and printing options in your browser before you print. hope this helps.
Edit:
If you don't mind having css in your html, you can try adding these styles in your html <style> tags.
DO NOT EVER modify Bootstraps less files, it will end up being a maintenance hell.
Most likely your problem is that the icon will be rendered to i:before and not being the content of i element.
So have your own css to be:
.text-success:before {color:#688c2a !important}
Better overwrite the css instead of changing vendor files;
#media print {
*, *:before, *:after {
color: inherit !important;
}
Using only html and css, how do I disable the blue (in Firefox) highlight color around an active input field.
I've tried using input {outline:none;} but with no success.
Thanks for the help! =)
ok,ignoring the previous code about outline, I chose the wrong property to change. What I'm trying to get is to simply remove the highlighting (whatever browser, its the bold and colored border that appears) around an active form input field, without changing or disabling the styling. Thanks =)
You have to use :focus declaration.
In this case:
input:focus {outline:none;}
All the input's in your project won't have the blue border.
If you want a specific attribute, use this:
input[type=text]:focus {outline:none;}
Hope it helps. =)
See this fiddle.
It seems that you have to set some border property to make outline: none work. If you comment in the border directive, the outline disappears.
input {border:0; outline:none;}
should remove all borders/outlines.
The answer is simpler than I reliased:
box-shadow:none;
Edit: my solution was way to complicated. It's simple as that:
input:focus {
outline: none;
}
You need to target the :focus state.
To remove the highlight try adding this rule to the input field(s):
-moz-appearance:none;
This can also be done for WebKit based browsers using the respective prefix:
-webkit-appearance:none;
This should take care of any borders, outline, etc. using just one CSS property.
For browsers other than the WebKit pair and Firefox - Opera and IE - it's advisable to include border and outline properties too, ensuring browser cross-compatibility.
add !important and define the color/background-color in your css file.
#title {
font-size: 40px;
color: black !important;
}
This should work for most input types on Firefox:
input::-moz-focus-inner { border: 0; }
button {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
I have noticed that under Safari on OS X my default jQuery buttons appear to have a blue glow highlight around them. Just checked and the same thing happens on the jQuery UI Demo page.
Under Firefox on my same machine it looks like this
Can anyone tell me what I can do to remove this under Safari? I would still like the default behaviour.
To remove any highlight of inputs that any browser may apply as default action you can always use outline:none for their css. in your case it's a button element. so this should work:
button {
outline: none;
}
Although it's not recommended to remove the CSS outline. as it's is bad for accessibility. (Thanks Robin Clowers for mentioning this)
Try using this
In CSS :
-webkit-tap-highlight-color: rgba(0,0,0,0);
In Javascript :
document.addEventListener("touchstart", function(){}, true);
*{
outline: none;
}
.blah{
outline-color: blue;
}
This will not affect the existed ones. (.blah) This works on Google Chrome too.
Live demo: http://jsfiddle.net/DerekL/TUbjc/
This button has actually an outline property defined. You have to override this. If you inspect this in Firebug you will see the following CSS declaration for this button:
.ui-dialog .ui-dialog-buttonpane button{outline:none;}
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.