When I visit many webpages I noticed that the standard radio button is blue when selected like this:
As far as I can tell there is no css changing the look of the radio button to be blue. However When I make a very standard html page it looks like this:
What am I missing exactly? Is it an external library causing the buttons to show blue?
this is the standard radio button code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="color"> Grey
</body>
</html>
I am using chrome version 65 to check
Styling for these elements is is primarily controlled by the OS/browser, and overrides are not universal across all browsers. From MDN:
By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them.
The rest of this article gives an example of how to style a radio element using the appearance: none CSS rule.
I have the same problem,and I found this from google and solved this problem:
Starting in M81, the standard form control elements (e.g. , , ) were given a refreshed look and feel, with improved accessibility and better platform uniformity. This policy restores the old "legacy" form control elements until M84.
If this policy is set to True, the "legacy" form control elements will be used for all sites.
If this policy is set to False or not set, the form control elements will be enabled as they are launched in M81, M82, and M83.
This policy will be removed after Chrome 84.
from:
https://cloud.google.com/docs/chrome-enterprise/policies/?policy=UseLegacyFormControls
We use UiPath for UI automation and ran into this same problem in Chrome after recent browser updates. It seems Google changed the default CSS for these inputs in Chrome v83.x plus.
If you would like to change the Chrome browser back to the default gray CSS you can change this new setting in the chrome://flags menu. We had to do this since we rely on some image-based selectors for our UI automation. It would be nice if Google did not force defaults like this.
Here is the answer I used from the link above:
David Boland 5131 6/16/20
If you must go back to the old (pre v83.x Chrome styling) disable
chrome://flags/#form-controls-refresh (Also called "Web Platform
Controls updated UI").
I wasn't sure what was wrong with my pages just something didn't seem
right. I'm going to have to take pictures of the websites I go to
along with the dates. For me it was an internal LAN gateway config
page that I knew wouldn't be updated with some weird blue color in CSS
because it's a really old box.
It changes checkboxes back to the old grey background with black
checkboxes and gets rid of that weird light blue color everywhere (it
seems even the hyperlinks got a bit lighter with v83).
I found the flag from a reddit thread. Thanks
Here is a screenshot of that setting:
Related
This is the (new) native datepicker found in Chrome/Edge on desktops.
As far as I can tell it isn't respecting my OS/browser color scheme (dark/light) and it's always rendering as white. Is there way to overwrite this behaviour in CSS?
Or is there a way to provide custom styles, e.g change the highlight color.
Thanks for any help.
P.s: I tried following the instructions given in Microsoft's blog post, but didn't get it to work (forced-color-adjust)
Live Example (run in Chrome/Edge)
<br />
<label>force-color-adjust: auto <input style="forced-color-adjust: auto;" type="date"></label>
<br />
<label>force-color-adjust: none <input style="forced-color-adjust: none;" type="date"></label>
If you want to apply some styles to the date picker then you can refer to this answer.
I also try to check the blog-post and your sample code.
I see the date picker shown in the blog and noticed that they are talking about Windows High Contrast.
That means to get a similar output shown in that blog, you need to turn on the High Contrast mode on your Windows 10 OS.
You can refer to the steps below to turn on/off High Contrast mode.
Click the right mouse button on the desktop screen.
Click on personalise option.
Select the Background tab from the left sidebar and click on High Contrast settings option.
Toggle the button to turn on High contrast mode.
Now, if you see the web page in the MS Edge (Chromium) browser then you can see the same result as shown in the blog.
I suggest you also try to check the code samples mentioned in this link. It can be helpful to apply CSS to elements, especially for contrast mode.
I have a simple, static website built using BS4. On this site I use their default:
navbar navbar-expand-md navbar-dark
Navbar for mobile. This is a simple hamburger menu in mobile. When the hamburger icon is in its ;focus state, the outline of the hamburger menu changes to a different colour, this outline feature can be disabled as follows:
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
}
I wanted to disable this to remove an orange colour I couldn't find in my CSS but didn't have time to hunt down so just disabled it altogether- however, I now realise this colour is proving impossible to find.
This colour in question has the hex code #e59700 (found using colourpicker). Absolutely nowhere on the entire site, in any CSS, html, or CDN hosted stylesheet can I find this hexcode, it is an orange colour and I searched for "orange" just in case to no avail.
I both searched my CSS & HTML manually in NotePad++ as well as using Ctrl Shift F (Dev tools search). Every single other colour used on the site can be found through this search, even those hosted on bootstraps CDN style-sheets.
I am completely and utterly lost, this isn't a caching issue as it appears on multiple devices after multiple hard refreshes. Any ideas?
EDIT: I have also tried searching in both the RGB and HSL colourspaces to no avail.
SOLVED
By default, webkit browsers use outline: 5px auto -webkit-focus-ring-color;.
On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700)
Essentially, if I force :focus on any object on the page it'll be given the -webkit-focus-ring-color which is #E59700.
When in your site view, the frontend will be rendering the color into something on the browser. Normally the rendering development tools will be delivering some CSS, and modern browsers will have a way to traverse this.
In Chrome you can do the following:
Press F12 to open the Devtools Menu
In the Devtools menu, press "Inspect element", then click on the orange element on your page
Navigate to the "Styles" pane: you will see it shows the CSS values and from where they come from
Click on the URL formatted text in the section containing your orange color.
As you are using a framework, it may or may not be a minified CSS document (file.min.css, for example). In that case for legibility you can prettify it by pressing the button at the bottom.
From there you will have the frontend rendering of your code and the source of where it is served from. Depending on your framework, you will be able to use the file which this is from to make the change you want to see in your code.
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.
I've been asked to fix a few bugs on a website, and one of them is throwing me for a loop. Due to the style layout of this particular site, when a user selects and copies text from a specified area, they copy rich text data which if pasted into a rich text editor, results in a large black text on black-background blob.
Ideally, I would like to strip all style data, or somehow enable plain text copying on a particular set of data.
Is this possible? Or would I have to resort to something like a a Flash applet like what GitHub uses for Git URLs?
If you're happy with using JavaScript to solve the problem you can capture the "oncopy" events (credit to #FirstZero) on the elements you wish to restyle, and then restyle the element using JavaScript and style it back again after a timeout.
If you are okay using jQuery you can use JavaScript similar to the following:
$('p').bind(
'copy',
function(e) {
var copyElem= $(e.target);
var defaultColor = copyElem.css('color');
copyElem.css('color', 'pink'); // Change the color to pink for copy
window.setTimeout(
function() {copyElem.css('color', defaultColor);}, // Change it back
1
);
}
);
(Try it out in jsFiddle)
Note that this would be neater if there existed an onaftercopy event, but unfortunately there doesn't seem to.
I've only tested the above solution in Chrome, but it should work in Firefox (since 3.0), latest versions of Chrome and Safari, and in Internet Explorer. It will probably not work in Opera.
Many many years ago, I made a custom form that replicated the look of a menu on a video game. At the time, Firefox didn't allow many form UI widgets (Firefox 2.something?) to be styled with CSS. Apparently in the last few years that has changed.
What I wound up doing to resolve this problem was creating a very large input text-box with the content passed in via the value="" attribute. (<input type="text", not <textarea)
Despite the ability to style input boxes and their content, this information is not retained when copying the text itself. So I completely side-stepped the issue, and the fixes are live!
It was quite a bit simpler too, absolutely no-JS required.
There are times when looking at a computed style in Firebug, it's not evident how a value is computed or what its origins are. In some situations, the source is the browser's default. In web sites that are already constructed, it's not feasible to inject a css reset which will result in breaking all the pages.
Is there a way in Firebug, Web Developer or another extension to display an inheritance structure all the way to the browser's default including displaying the value of the default?
Click on the down arrow on the Style tab in the right panel of Firebug. Uncheck "Show Computed Style" and check "Show User Agent CSS".
The blue filename next to each selector is the CSS file where the selector is defined. The Firefox default CSS file is called html.css and its location (when you hover over it) is resource://gre/res/html.css, that's how you know it is the browser default.
Turn off Show Computed Style.
It then breaks it down by declarations and classes and Browser Defaults. It is that little arrow when you hover over Style.
Also, Turn on 'Show User Agent CSS'.