Dynamic content shifting due to autocomplete feature in input field

Whenever the autocomplete menu pops up in Chrome and I hover over one of the selections, the content below the input jumps. It seems like the autocomplete selection is adding vertical padding for some reason. How can I prevent this annoyance? Here is a demonstration:

Fiddle Demo

You might need to access the fiddle because the autocomplete is disabled for unknown reasons in the snippet. However, if you click on the input and hover over an autocomplete entry, you will see the green box move. What causes this issue and how can you eliminate this behavior?

div{
  width:300px;
  height:200px;
  background: green;
}
<input type="text" name="q" />
<div></div>

htmlcss

Answer №1

Webkit browsers have default styles for autofill, which can cause a border to appear different from the default one. To fix this issue, you can override these styles by changing the border property.

Simply adjusting the border property resolved the issue for me.

div{
  width:300px;
  height:200px;
  background: green;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  border:1px inset;
}
<input type="text" name="q" />
<div></div>

Related: Removing input background colour for Chrome autocomplete?

Answer №2

It's all about how the web browser behaves. If you want to change it, you can use the :hover pseudo-class and ensure that its width is always set to 99%, then place it within a container.

Check out my example below:

div{
  width:300px;
  height:200px;
  background: green;
}

input,input:hover{
width:99%;

}
<div>
<input type="text" name="q" />
</div>
<div></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that two div elements within a list element fully utilize the available width on a webpage?

I am looking to create a 'settings' div that adjusts its width based on the available space on a page. This could range from 1000px to 600px, and I want the div to always be next to the 'title' div without wrapping onto the next line. F ...

htmlcsswidthhtml-lists

Expand the width of the image to fill the entire screen

I have been working on trying to insert an image into my header element. However, when I test it using Live Server, the image doesn't fully fill the width of the container. Update: The dimensions of the image are 899.875 x 600. Below is my CSS and H ...

htmlcssimagecontainers

Stacking sheets of hole-punched paper on top of one another, create a visually captivating

I am in search of a way to create those distinctive black dots with papers displayed here: body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba ...

javascripthtmlcss

CSS navigation drop down menu styling

I am struggling to align the navigation menu on the right side in the center of the header area, similar to what is done on cyberchimps. https://i.sstatic.net/2OeJe.png Additionally, I want the hover state to remain active on the BGA sub-menu when hoveri ...

htmlcssdrop-down-menuheadernavbar

Uncertainty surrounds the interaction of computed height and margins with CSS float right

What is the reason behind this HTML code: <html> <head> <style type="text/css"> .left { background-color: yellow; } .right { float: right; background-color: lightgray; width: 150px; } </sty ...

csshtml

Error: ASP stylesheet no longer functioning

Why won't my CSS changes apply after I update the file? Even though it was working before, now when I make a change to my CSS file, the updates do not take effect. When viewing the applied styles on IE11 in troubleshoot mode, I am seeing the old sett ...

htmlcssasp.netvisual-studio

Achieve a seamless alignment of text/icons at the bottom of a row in BootStrap 4

Looking at this screenshot showing red and blue lines from a Firefox add-on called Pesticide: https://i.sstatic.net/h3Dmy.png Here is the code from the screenshot: <div class="row my-auto"> <p class="h6"> < ...

cssbootstrap-4

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

javascriptjqueryhtmlcss

``Are you searching for a way to determine the quantity of elements within a DOM tree

I am working with an unordered list (ul) and I need to determine the number of a specific list item (for example: Tomato's number is 3). <li>Apple</li> <li>Orange</li> <li>Tomato</li> <li>Potato</li> D ...

javascripthtmlvue.jsfrontend

Guide is about checking if the name in $_POST is empty

How can I check if the name field is empty and print "failure" if it is? if (empty($_POST["name"])) { echo "error"; } I am having trouble checking in POST. Here is my code: ajax.js $( document ).ready(function() { $("#btn").click( f ...

javascriptphphtmlajax

I am experiencing an issue where links are not aligning correctly within table cells in Outlook

In the email preview from Email on Acid, I am seeing some centered text and links, but it is not displaying as expected. Most other email clients are showing it properly. https://i.sstatic.net/wCPVH.png Here is a snapshot of how it should look: https:// ...

htmlcssemailoutlookzurb-ink

Discover internal hyperlink using user input and generate a click event for the anchor

Is there a way to use jQuery to locate internal links on a page based on user input and trigger a click event on the anchor tag? ...

jqueryhtmlhashinputdictionary

Is it possible to trigger a modal to open automatically after a 3-second delay?

code: <script> $(document).ready(function() { setInterval(function() { $('#contact').modal(); }, 3000); }); </script> html code: <a href="#contact"><h4><i class="fa f ...

phphtmlcss

What is the best way to ensure that my pictures are only visible within a modal box?

I've set up a modal box called sectors with two subcategories: publication and food. Each subcategory is linked to a div that contains an image. My goal is to hide the image inside the modal box and display it on the screen once the box is closed. ...

javascriptjqueryhtmlcss

Include a hyperlink that is activated when hovering over an image

UPDATE: I am amazed by the quick responses, this is my first time using this platform. Thank you to everyone who helped out. The person who provided the answer understood exactly what I was looking for. To others who responded, thank you as well. I need h ...

javascripthtmlcss

CSS Table with Adjacent Single-Cell Row Restricting Multi-Cell Column Width

Hey there! I'm working on designing a website layout using CSS and divs that must meet the following criteria: The top and bottom elements should take up 100% width The top element should be a single "table-cell" The bottom element needs to be divid ...

htmlcsscss-tables

Having difficulty accessing information from a webservice on the Ionic1 framework

I am a beginner with the ionic1 framework and currently working on a sidemenu ionic app. My goal is to fetch a list of playlists from a Mysql Database. I attempted to do this in my controller.js : .controller('PlaylistsCtrl', function($scope,$ ...

phphtmlmysqlangularjsionic-framework

Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image : https://i.sstatic.net/lxacy.png. Attempted to enclose the button within a div using justify-content-center align-content-center text ...

cssbootstrap-4

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

javascriptjqueryhtmlcssgetelementbyid

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js