I have a simple select tag in html without any options inside it. When I open the html file in one machine the menu opened is showing in white color as a background.
and the same html file and with same select tag without any options, if i open in another machine then the menu opened is showing in black color.
Why the color is different between these two machines and what could be done to remove the black color and show white color.
Note: In both machines Microsoft Edge (chromium) browser is used.
The two machines may have different versions of Chrome installed. You can check the browser version by looking at chrome://version/. So the background color of the selected component is different.
Solution: Use css rules to override the background color of the default selected component, and ensure that the browser versions of the two machines are the same.
Related
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.
When a window is active in xcode project navigator background color blue, and when two or more it is default. How to make that it was always defaulted?
http://imgur.com/a/B2VFr
There's two ways to change colors in Xcode.
First is the "Fonts & Colors" tab in Xcode's preferences, which look like this:
That doesn't change the color of the files in the Project Navigator, though. To do that, in System Preferences there's a tab helpfully named "General", you can change the settings for your system in it. Here's what it looks like for me now:
I chose "Graphite", and that changes selected files in the Project Navigator to have gray surrounding the filenames.
So, the problem was on the system side. The wallpapers color mixed with color of IDE. I reduced transparency. So that was it.
Code inspections are highlighted on the right-side of the editor as red/yellow lines. I want to change the background color of the entire column (not the color of individual inspections).
In previous versions of PhpStorm (with the Darcula theme), the column was a grey color. In PhpStorm 10, it is now transparent. Is there a way to change the background color?
Not really. That color is part of the IDE Theme which is not user configurable.
But you can show some background there:
Help | Find Action...
Look for Registry there (exact match)
Once got inside Registry window look for editor.transparent.scrollbar and uncheck it (user modified values will be displayed in bold .. so make sure you have changed it, not just "Click and that's enough")
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
With latest Chrome (43) cycling through color formats on color swatch click in DevTools' Styles has stopped working. The only way I can switch formats now is to change them manually in options. Is there a way to get back this feature without extensions?
The behavior seems to be changed, now you need to shift+click the color swatch instead of simple click. Thanks #Superfy.