I have custom text input CSS on my site, which causes the boxes to be all white when selected and grey when not in focus, as you can see here:
In the second picture, Google Chrome automatically fills in my username and password as I have it saved, and it highlights the inside of the box (not the border) a pale yellow. Is there some sort of CSS selector to override this event, or some better way to do it? Is there a way I can make my border highlight as well?
Try using background-color: white !important; which should override Chrome's autofill, unless Chrome is programmed to override everything, in which you can't do anything about it.
Related
I try to stylizing a Material Checkbox (https://material.angular.io/components/checkbox/overview). There are several things that I have done without problems (like change color, border etc). I would like, but I can't seem to do it, only when the checkbox is unchecked, display the checkmark on hover. As the example on the right in the picture, this to indicate that we can click on the checkbox checkbox-hover
Any ideas ? Thank you !
The checkmark is hidden by setting the SVG path's stroke-dashoffset to ~23px.
In order for the checkmark to be shown on hover you'll want a CSS rule to set this value to 0px and supply a background colour to the checkbox so the checkmark can be seen.
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
I am working on an application which implements a list filled with anchor tags into a list of clickable tabs by wrapping it and the content for each tab in a container. Here is the list, for reference. This code outputs the following image. The second image is an example of what happens in Chrome after I click on a non-default tab (i.e. Loans).
I believe Chrome is generating this blue border as some sort of active effect for the anchor tag, as it is removed if i press any keys or click at all. The blue border also does not appear in Internet Explorer 10. I have not tested other browsers.
Is there any way to prevent this border from appearing in the first place?? I am almost sure it is generated by the webkit somehow but am not well-versed in it, nor know much about docs for it.
<ul>
<li>Borrowers</li>
<li>Loans</li>
<li>Funding Sources</li>
<li>Users</li>
</ul>
Images Illustrating Before and After Click
That border is displayed to show focus. Add the following css snippet to remove the focus outline from all of your elements.
*:focus {outline: 0;}
If you don't want to eliminate the focus outline for all elements but rather just your tab list add the following.
li:focus{outline: 0;}
Made a quick fiddle as an example.
See sample with focus outline and sample without focus outline
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.