Chrome hiding background image with autofills - javascript

Hi guys Im working on basic signup and signin forms.In my input fields I consist of background image and white color.In chrome autofill was replacing my background image and color with pale yellow color.For this I have searched and found out few lines of code....
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
This was making my backgroundcolor to display...but Unable to show the backgroundimage in input field.Can I get few bits of code to show the background image when autofill in chrome.
input#email {
background: url("~mail.png") no-repeat scroll 16px 11px #FFFFFF;
background-size: 20px 20px;
z-index: 999;
}

IMHO, you can do this in 2 ways
1: put a z-index field on your css to your background image so that it overlaps whatever is overlapping it at the moment
z-index: 999 //for example
2: Or make your image have top-margin to make way for the input field's autofill space:
margin-top: 25px;

Try the change with jQuery:
if ($.browser.webkit) {
//$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="password"]').attr('background-image', 'src');
}

Related

Specific CSS rules for overlapping shapes/divs

I'm trying to recreate a screenshot app to better understand HTML, CSS and Electron and so far I've made a keybind that toggles the overlay of a 0.25 opacity transparent box that fills the screen. And a transparent red outlined box that can be dragged to select an area for the screenshot
As the red box is transparent and is on top of the 0.25 opacity box that fills the screen, the red box has the same opacity as the rest of the screen. I want the area inside the red box to "clear the opacity" so that it is viewed as 0.0 opacity, basically a "bright area" in the red box that looks the same as the screen would without the opacity. Like this
I tried setting the rgba to (0,0,0,0) but that didn't change anything as I expected and I cannot find any documentation for CSS about overlapping elements.
Do you have any idea on how I can implement this?
The first thing that comes to mind for me is a huge box shadow on a transparent element. I don't know how performant this is, but it works.
.screenshot {
position: fixed;
top: 50px;
left: 50px;
width: 300px;
height: 100px;
border: 1px solid red;
/* large box shadow */
box-shadow: 0 0 0 max(100vw, 100vh) #0005;
}
<div class='screenshot'></div>

How to use hover effect on images with no background edge-to-edge? [duplicate]

This question already has answers here:
How to give outer glow to an object in a transparent png using CSS3?
(7 answers)
Closed 7 months ago.
I am trying to make desk setup in css where if you hover over an image it will the background glow will change. I have used an image with no background like this:
And this is code I have written:
.parent {
height: 700px;
width: 100%;
box-shadow: 20px 20px 50px 10px black;
position: relative;
}
.Table {
position: absolute;
top: 30%;
left: 30%;
margin: -35px 0 0 -35px;
}
.Table:hover {
color: rgba(255, 255, 255, 1);
box-shadow: 0 5px 15px rgb(255, 154, 3);
}
js
import "./App.css";
import table from "./img/desk-removebg-preview.png";
import laptopStand from "./img/laptop_stand-removebg-preview.png";
function App() {
return (
<div>
<div class="parent">
<img class="Table" src={table} alt="Desk" />
</div>
</div>
);
}
This is how this looks on hovering
Since this table image has no background shouldn't the background colour around table edge to edge change? Why is it changing background glow of the image div? How can I achieve this?
Just to show this image has no background here is a screenshot from vs code.
You should be using drop-shadow instead of box-shadow.
CSS filter has lot more options, you can dim the image or make it brighter too.
filter: drop-shadow(16px 16px 20px red);
For the image to have a background too along with shadow, I suggest you to add background to the parent on hover. Because if you apply background on the image then the drop-shadow will be covered by it. So apply bg to parent.
Don't load another image on hover only for this effect. Depending on user's bandwidth, the user will have to wait for the second image to load as he hovers and it won't look so good, whereas with CSS transitions you can make the above mentioned fixes looks slick.

Leaflet.js : Add custom text to layers control using CSS?

I am building an interactive map using Leaflet.js. The out-of-the-box layers panel that comes with Leaflet is difficult to hack. My users have large resolution monitors and they easily miss this little collapsed layers icon. So, what I want to do is add the text "View Overlays" to the right of the icon. Apparently, the icon is also larger than what is shown in the map. It looks like CSS is shrinking it down a little, but I am not sure how to revert the icon size back to its default larger size.
Here's my attempt to get started, but it's not very good (plnkr here)
.leaflet-control-layers-toggle {
width: 200px;
}
.leaflet-control-layers-toggle:after {
content: 'View Overlays';
padding-left: 2em;
}
Questions:
1.) How do I increase size of that sandwich icon?
2.) How do I correctly add the text "View Overlays" and keep the element from going into an epileptic seizure?
1.) How do I increase size of that sandwich icon?
The sandwich icon is a background image. This background image is made out of multiple images, see the full image here. It is resized and placed to fit with Leaflet's CSS definition here:
.leaflet-container.dark .map-tooltip .close, .leaflet-control-attribution::after, .leaflet-control-layers-toggle, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .map-tooltip .close, .mapbox-icon {
opacity: 0.75;
background-image: url("images/icons-000000#2x.png");
background-repeat: no-repeat;
background-size: 26px 260px;
}
You have to change several CSS definitions to get it working right, it would probably be easier to cut the image with an image editor and make it the right size...
Changing background size and position:
.leaflet-control-layers-toggle {
background-size: 56px 560px;
}
.leaflet-control-layers-toggle {
background-position: 0px -235px;
}
You might also want to resize the a height and line-height and left margin, since it doesn't care about the background size and would either cut off the background or the text run into the icon.
.leaflet-container a {
width: auto;
height: 3em;
}
.leaflet-container a:after {
margin-left: 30px;
line-height: 3em;
}
2.) How do I correctly add the text "View Overlays" and keep the element from going into an epileptic seizure?
Problem is that your active and inactive box have different size, make them the same width and it should work:
.leaflet-control-layers {
width: 200px;
}
See code here: http://plnkr.co/edit/2Vkci7MtfGcm9tvCUblx?p=preview

How to create a scrollable textarea with scrolling background image?

I would like to add a background image to the textarea that scrolls along with the content. I'm programming in HTML/JavaScript/CSS specifically for mobile Safari.
I've attempted a variety of things but nothing seems to work.
I tried placing the textarea on top of the image and then scrolling the background image whenever the textarea is scrolled. It works more or less fine when I'm typing text, but the native scrollbars (which I don't want to get rid of) make it look a wreck on mobile Safari.
I tried using a contentEditable div container but that seemed to throw problems too (again with the scrolling).
Is it possible to have a textarea with native scrolling with a background image that scrolls?
A background image can be applied to an input or text element as shown:
check the fiddle jsfiddle
html
<div class="outer">
<textarea></textarea>
</div>
css
.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden }
textarea{
background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat;
width: 302px;padding:5px; height:99em;
}
Note: The difference between the two is that the content within the div (assuming it's coded correctly) will be included as search engine usable text whereas the textarea content will not.

Submit button disapears on hover and then reapears

So I'm using CSS :hover to replace a submit button background. When I mouse over the button the old background image disappears (so it looks like nothing is there) for a moment and then reappears with the new background. I thought that perhaps the button image file size was too large but its only 1.4kb. Is there a way to prevent this, caching or pre-loading, or something along those lines?
Is this only on the initial page display / hover?
This will be because the image file is only loaded on request - i.e. the hover action.
To avoid this, both button states should be stored in a single file. You then just need to adjust the background-position property to display the correct half of the image for it's current state.
Here's a rough example (note that button.png contains both image states and is 40 pixels high):
button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}
button:hover {
background-position: 0 -20px;
}
You could, maybe, use a technique that's similar in intent, albeit not execution, to Bryn's answer, above.
.button {background-image: url(img/for/hover-state.png)
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
height: 1.5em;
width: 5em;
}
.button span
{background-image: url(img/for/non-hover-state.png);
background-position: top left;
background-repeat: repeat-x;
background-color: #000;
height: 1.5em;
width: 5em;
}
.button:hover span
{background-color: transparent;
background-image: none;
}
The similarity I mentioned is to have both images present on the document in order to avoid the hover-flicker. On hover of the button the background-image of the span will disappear, and reveal the hover state, rather than having to load it on-demand.
The bonus is that, although I specified the height/width above this technique will work for dynamic re-sizing, not relying on fixed-width sizes of images (or it's as fluid as your design can allow it to be).
It's because it takes time for the "hover" image to download before it displays. To prevent this, you can use a sprite image technique.
Example: Using Sprite Images with INPUT for a Hover Effect

Categories

Resources