I display a world map by an img tag. I associate an image map with it to hyperlink some regions. I overlay a bordered box div indicating a certain region can be clicked and zoomed.
Now to show the user it does this I want the cursor to change to a magnifying glass shape. I looked through the web and found something that works in firefox and ie6-8:
#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }
Unfortunately opera,chrome and ie9 ignore it and show the default (i.e.: pointer). How can I use cross browser custom cursor icons?
The -moz- part of the -moz-zoom-in; means that it's for Mozilla only, to make it cross browser, you need all of the tags in the same id tag css:
#zoomregion:hover {
cursor: url('templates/test/styles/images/magnify.cur');
-webkit-zoom-in;
-moz-zoom-in;
-ie-zoom-in;
-ms-zoom-in;
-o-zoom-in;
}
-webkit- accounts for a lot of browsers, including mobile (which, for this use, it's probably not needed) which is very useful and shortens things a lot.
Related
Recently i was working on a web design project, and noticed something odd, after the last Google Chrome update. The default border style(user agent style) for button is changed, and which is looking visually annoying to me.
Is there any method to modify/restore the default browser styles, i.e., user agent styles permanently?
here are some images of the problem:
i have also checked other websites and even google
also checked the dev tool, found this border styles applied on the focus state of the button
This is because the new chrome update
https://developers.google.com/web/updates/2020/05/nic83#forms
you can override black outline in most cases by
*,*:focus,*:hover{
outline:none;
}
and you can see this article
https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator
if you want to remove outline just for mouse user.
You could try disabling this flag: chrome://flags/#form-controls-refresh
Apparently the 83+ version of chrome changed how forms are rendered / handled:
https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html
Here is a relevent Google Support page which links to the blog post above:
https://support.google.com/chrome/thread/48974735?hl=en
The issue isn't Chromium's new contrasting focus ring, it's the default behavior across browsers that clicking triggers the focus ring.
The focus ring appears on click when the <button> appearance is altered or receives tabindex attribute.
Accessibility is a must and the new contrasting black and white focus ring is a great step forward. However there are developers (including me) that don't want the focus ring to be present when using the mouse.
Solutions
:focus-visible css pseudo selector. Supported on all modern browsers MDN Browser Compatibility
/*
This will hide the focus indicator if the element receives focus via the mouse,
but it will still show up on keyboard focus.
*/
button:focus:not(:focus-visible) {
outline: none;
}
focus-visible polyfill
/*
This will hide the focus indicator if the element receives focus via the mouse,
but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
if you're using a framework that overrides classes, use the focus visible attributes.
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
outline: none;
}
Keep in mind that for mobile users, if there's an element that triggers the soft keyboard to pop up, such as <input type="text">, it should have visual indication that it is focused.
There are 2 way to handle it.
configuration in chrome which few has suggested.
Programmatically approach outline: 0px transparent !important; in style Or outline: none !important; Both have worked for me.
Since we can't force user to do configuration, I would suggest for second Option but it is long process If you have any shorter way tell us.
This solved it for me:
chrome://flags/#form-controls-refresh
And disable this: screenshot
settings in chrome > Appearance > Show a quick highlight on the focused object.
Disable this option.
Go to chrome desktop browser
settings->Advanced->Accessibility->(Turn off)Show a quick highlight on the focused object
to avoid the shadow boxes when u click on your browser
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);
}
I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.
Example:
(Edit: Just to be clear, I'm not referring to the user agent stylesheet)
I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.
I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?
Rules that are faded are not applied to the element.
Take a look at this example
<!-- HTML -->
<div>
<span>Test</span>
</div>
/* CSS */
div {
color: #F0F;
margin: 15px;
stroke: #FFF;
float: left;
}
If you open dev tools, you will notice that margin and float are faded, color and stroke are not. That is because span element inherited style rules from its parent, but only color and stroke rules are inheritable.
The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.
You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.
It means that the rule has been inherited:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
These are the stylesheets that are applied automatically by the browser.
You can see this by the description: user agent stylesheets.
You can disable this in the setting in the lower right corner by checking Show user agent styles. Now the styles won't be shown in your CSS panel (but are still being applied!)
EDIT:
i misread your question, the dev doc says the following about dimmed rules:
Note: If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You should rarely need to do this.
Your screenshot looks like this could have been the case.
I'm working on this site: http://oq.totaleclips.com, and Opera displays the Facebook Like button out of horizontal alignment with the other social buttons on feature pages such as: http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012)
I don't want to make radical changes to the container div's css, because it works fine in other browsers. Perhaps a browser-specific style would fix the issue, but the div called fb-like does not seem to accept css over-rides well (as in `.fb-like{height:21px !important;})
How can I get this to line up properly in Opera?
Unfortunately, because that particular (and most easy to use) Facebook Like button(s) uses FB's iframe, you're unable to style it (otherwise, .fb_iframe_widget span {vertical-align: top;} would do the trick.)
There are other ways of implementing a like button without using an iframe, ranging from the accessible (Open Like), to the somewhat involved (Facebook SDK).
If you're stuck with the iframe, though, you could theoretically use an Opera specific css selector:
x:-o-prefocus, .fb_like {
margin-top: -10px;
}
I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.
So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.
http://www.google.com/
EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.
Are you using a mac? Aren't all of the native UI elements round, glow, and change color?
Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?
Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:
removed dead ImageShack link
No secret. It's a normal text box... Google's home page has always famously been minimalist.
not sure about their home page, but they do the same in Gmail, and there's CSS involved:
.mFwySd:focus
{
border:2px solid #73A6FF !important;
margin:0 !important;
outline-color:-moz-use-text-color !important;
outline-style:none !important;
outline-width:0 !important;
}
.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.
Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.
It does not look like they are stylizing the search box. But if they wanted to they could just use the native HTML tag input. You just have to reference it in the CSS file.
input {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
This would just cover the search field box.
If you needed to cover the button, just add a class to your button input field.
I always use .btn
input.btn {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
Now this should give you complete control over any input field on you entire website.