Can't find CSS Colour in Dev Tools - html

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.

Related

Is there a way to style the new input date and input time pickers found in Chrome/Edge 80

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.

What is making Radio button blue vs grey

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:

How to be sure that IE10/11/Edge do not use the "tile" icon for the address bar/tab icon?

Is there a way to force Internet Explorer and Edge to use a particular favicon for the address bar/tab icon?
In general I'm using a different design (with a wider margin) for "live tile" (or whatever Microsoft calls them)... and for some reason these browsers keep choosing one of those images (defined in browserconfig.xml or one of the Apple icons... not sure) to use in the address bar.
This is not what I want, because the one in the address bar/tab icon needs to have a smaller margin and transparent background.
Is there a safe and consistent method to say "use this icon for the address/tab bar icon", and "use this icon for the tile or whatever?"
EDIT: Another acceptable workaround for this would be if there was a way to specify that the images with a background/margin would ONLY be used for "tile" so that the others would be favicon(s) only? I don't fully understand what logic IE/Edge use to choose which icon to display.
The favicon package generated by RealFaviconGenerator behaves the way you want: In its tabs, Edge picks the classic "desktop" icon, while it uses the tile icons for sites added to home screen. More precisely, Edge is using the classic 32x32 PNG icon as the tab icon.
I advice you to first run the compatibility test with Edge on your machine to make sure it behaves as described above (I didn't have a Surface tablet or something like this to test it).
Full disclosure: I'm the author of RealFaviconGenerator.

Hover and focus in browser inspection

I want to know if there is the possibility, by browser inspection of write a new class containing new hover/focus. For example
.CanIDo {
/*something css
(ex.)*/
width: 100;
}
/*my question (BY BROWSER ISPECTOR, i don't want to type it directly in my css using a text editor)*/
.CanIdo a:hover{
opacity: 0.7;
}
I think this is impossible because browser ispector don't admit to change a class directly, but only the containing of that class (right?), but maybe there are browser that have impove that, I think it can be helpful developing a web site.
Thanks!
If I understand your question, you are asking if you can write CSS "on the fly" in a browser Dev Tool and see the effects immediately on your page?
The short answer is yes. The Dev Tools in Chrome, FireFox, and even the latest IE/Edge browsers have that ability. You can tweak applied styles one by one using a DOM inspector or even wholesale update a CSS file in a Sources tab (the name varies slightly between browsers).
And yes, you can write pseudo-class rules like hover and they'll take effect. You can develop or tweak your code and see the results immediately.
Most browsers have inspect tools that allow you to add any class on the fly.
For instance on Chrome if you open Developer Tools you can add any class to your css, be that a :hover variant or any other normal class, pseudo-class.
What you have to do is open the inspector Cmd + Shift + I on OSx and you'll see this on the Elements tab:
You can see that on the Filter you have a "+" button, clicking that you'd be able to stuff like this:
Those two classes a:hvoer and other-class are added via the inspector as you can see on the right is written: inspector-stylesheet

How to find a specific html color code?

I have buttons with a color for each state :
state enable : #007BC2
state disable : #428bca (pale version of enable color)
This css is a file I have picked from a template.
Now my client wants for the button this enable color : #4B0082.
I want to find the color code for the pale version of #4B0082 (for the disable state).
Is there a css tool on the web to find this color or do I need to browse a color picker to find the "pale" version of this enable color?
Thanks for your answers.
I suggest using chrome or firefox. Here you can right-click any element on your webpage. For your example: right click the button and click 'inspect element'. You can now see the developer tools window. Here you can see all the css or html attributes for your button.
So take a look at the background-color attribute and click the color thumbnail. A color picker becomes visible (see screenshot) . You can now choose the color and see a live preview of that color in your web page.
You can use Colorzilla (chrome add-on) to pick color from page and to find its pale version.It also contain option of generating css gradient and even get history of your picked color
You will find colorzilla on chrome webstore