Form input hover affect

Hi thanks for any help,

In my form, i have so that whenever you hover over the input fields you get an orange border,

The issue is when this occurs it seems to change the margins above or below depending on screen size and position.

Code:

https://codepen.io/Cl0udFir3/pen/zYBaYVo

Im not sure why it does this any thoughts ? I would like nothing to move from hovering over and having the border appear.

You aren’t really using the border on hover, but a box-shadow. I would just set the border color to transparent on hover.

Also, you really don’t need a separate selector for each input element.

input:hover, select:hover {
  border-color: transparent;
  box-shadow: 0 0 0 5px orange;
}

Basically, if you change the size of the border on hover the element box will grow or shrink so it might affect other elements.

The way you declare the border on hover, black 2px as opposed to 2px solid black it’s actually setting the border-style back to initial which is removing the border (setting border-style to none). So the element box is getting smaller which is why it’s affecting other elements.

Example


BTW, your labels are missing the for attribute (at least for the labels without nested inputs).

1 Like

WOW x) that’s what I get for rushing through, same with me saying border instead of shadow.

This helped me fix the issue, consolidate, and gave me some good knowledge. Thanks very much!