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;}
Related
Using contact forms 7 on my Wordpress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit.
The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.
Should I have applied it to a different element?
You should try this code instead :
input.wpcf7-form-control.wpcf7-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Consider adding !important if it still not working.
sorry for the super late answer.
The class seems to be correct indeed.
Temani's answer is also a good suggestion for wider browser compatibility.
However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect.
So, I'm going to give you two answers:
For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status
Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none
Hope this helps
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;
}
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;
}
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
How can I change the font color of a disabled SELECT element in IE? No matter what I tried it stays gray. I was able to change the background from gray to white but the text inside the disabled SELECT stays the same. What works perfectly for Firefox has no effect in terms of font color in IE (in this case IE8). You can see the latest situation for both browsers here:
http://www.flickr.com/photos/64416865#N00/4732813702/
I use jQuery to disable the select element:
$(selectObject).attr('disabled', 'disabled');
and here is the CSS class that I use for disabled selects:
select[disabled] {
color: black;
background-color: white;
border-style: solid;
}
I find it very strange that I could easily change the default background color of disabled selects but not the default font color. Any tips or ideas about this? (Or is this completely impossible in IE by using CSS?)
It might be impossible to do in current IEs. Browsers to come will probably support a :disabled pseudo-class (see http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-24.html )
EDIT: You have to supply support for the most browsers, and only 50% of the browsers supports that type of pseudoclasses, so, if i was you, i would do this:
$(selectObject)
.attr('disabled', 'disabled')
.css({
"color":"black",
"background-color":"white",
"border-style":"solid"
});
hope it works ;)
apply:
background-image: url('');
to your css and it should work.