It is possible to remove the extra Firefox-specific spacing from <button> tags. The only drawback is that the outline will be missing when you focus to the button on your keyboard.
I would very much like to make my buttons consistent across Chrome, IE8, Firefox. If I could use a CSS :hover, I could easily show the button as focused using the same style that removes that Firefox spacing and outline.
Is there any way to do this without JavaScript? I do not care if other browsers ignore the rule. In fact I would prefer a :-moz-focused if there is such a thing so I can be sure that it won't happen in the other browsers.
Also, if a Chrome style outer glow could be accomplished in Firefox, that would be twice as good.
There is, in fact, a :focus selector. Is that not what you need?
a:hover, a:active, a:focus {
border: 1px dotted #f00;
}
I've done this with pretty decent results, although it is possible with the right combination of clicks and tabs to wind up with more than one element highlighted (one active and another focused). Not likely to be an issue in normal use, though you might consider a visual distinction between hover/active and focus.
Also note that :focus is supported in IE8 and 9 but not earlier versions. (The chart on quirksmode.org seems to indicate that it doesn't work in 8, but testing shows otherwise.)
CSS has the :focus selector for this purpose, which works like :hover, but applies to the element that has focus. There doesn’t seem to be a Firefox-specific version.
Related
I am trying to hide the autofill style for a password input field that comes in via the user-agent-styles.
When inspecting the element, the computed styles show that the color coming from the user-agent-style is being overridden and #fff is being applied, but the actual computed style is still the one coming from the user-agent.
Any idea on how to get rid of this?
Here is the CSS I am using to try and override it:
.password {
border-right: none;
background-color: #fff !important;
}
#MainContent_txtPassword:-webkit-autofill, input:-internal-autofill-
previewed, input:-internal-autofill-selected, textarea:-internal-autofill-
previewed, textarea:-internal-autofill-selected, select:-internal-autofill-
previewed, select:-internal-autofill-selected {
background-color: white !important;
}
I found an answer that works for me! See https://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
I had initially come across https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ but that only works for opaque backgrounds, and not transparent ones. The webagility article includes a nice hack for transparent backgrounds too.
To summarise both the articles, the solution I applied is:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-transition-delay: 99999s;
}
The reason this works is because chrome applies autocomplete styles via a css transition. If you delay all transitions on that input, the styles will never be applied.
This behaviour is seen in Chrome only (it is not in Firefox, I didn't test Edge or others). Chrome applies a pale yellow background (#E8F0FE) and black text to all autofilled inputs. This user agent style for autofilled text has hard-coded priority in Chrome's rendering since Chrome version 74. This behaviour is intended by the Chrome developers.
In Chrome, these hard-coded styles will override anything you can set yourself in the document or via Javascript. In the original question, Style Inspector shows the OP's background-color: white !important style as having precedence over the user agent style input:-internal-autofill-selected. Style Inspector is wrong to show that: it looks like it does not know that the user agent style for autofilled text has hard-coded priority.
I replicated the OP's issue in a (codepen). Note that I even tried to update the input:-internal-autofill-selected user-agent style in the document's own CSS, with the !important suffix. Even with that in the CSS, Chrome still uses the original, hard-coded user-agent style. This codepen also shows you that none of the following methods will be effective to override the user agent style in Chrome.
use CSS with greater specificity
add style to the element in HTML
use an event in Javascript to change the element's style properties (for example backgroundColor) after data is entered
This has been reported to Chrome as a bug. The developers' response is WontFix, citing a security concern. Chrome devs don't say what the security concern is, but I guess it is that a malicious site could create HTML with hidden input boxes (no border, and background and foreground colours matching the page background) and gather some auto-filled data without the user's knowledge.
This "WontFix" attitude is not a great solution. It annoys designers who want to control the appearance of input boxes. The OP wants a pure white background and Chrome changes it to #E8F0FE which is maybe not a big deal, but it's way worse for designers who want to use a dark background. How hard would it be for Chrome to check programmatically that the page has styled the input box with high enough contrast to be visible to the user? Chrome has also not fully solved the security concern, because a malicious site can hide an input box in some other way: it could be outside the visible screen area, or covered by a different page element.
I had a similar problem attempting to style a select option element's background colour when :checked.
I'm using pseudo elements to add checkboxes to a select element where multiple selections are allowed and didn't want to whole row showing as being selected.
I found that changing to another colour had no effect over the User Agent Stylesheet (Chrome) but using a gradient as the background did.
option:checked {
background: linear-gradient(0, #fff, #fff);
}
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
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?
I am actually do not even know hot to define this, but I need to change the text background color. Never did this. Now when I am selecting the text, lets say pressing the left mouse button and marking a proportion of the text all the background becomes red, so I do not know what element defines this property.
You need the ::selection pseudo-element:
::selection {
background-color: red;
}
However, note that since this is a fairly new CSS3 selector, you need to use the browser specific prefixes for maximum compatibility:
::-moz-selection
Also be aware that this has been removed from the CSS3 specification. It will not work in IE below version 9, but will work in the majority of other modern browsers.
You are probably looking for this (note double : is correct):
::selection {color:#fff;background:red;}
::-moz-selection {color:#fff;background:red;}
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.