How to make `
` not expand when `` is hovered

Question

Code

.topnav {
  background-color: black;
  overflow: hidden;
}

.topnav a {
  box-sizing: border-box;
  color: white;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
}

.topnav a:hover {
  background-color: blue;
  color: white;
}

.topnav a.active {
  background-color: blue;
  color: white;
}

.topnav input[type=text] {
  display: inline-block;
  float: right;
  width: 20%;
  padding: 14px;
  border-radius: 1px;
  background-color: white;
  margin: 6px;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
}

.topnav input[type=text]:hover {
  border: 3px solid blue;
}

<div id='menu' class='topnav'>
  <a href='#1'>abcdefg</a>
  <a href='#2'>abcdefg</a>
  <a href='#3'>abcdefg</a>
  <a href='#4'>abcdefg</a>
  <input type='text' placeholder='Search here'>
</div>

Goal

As you can see, when <input> is hovered, its border expands by 3 pixels.

However, it makes <div> expand as well, which is not what I want. In other words, I want <div> not to expand when input is being hovered.

What I've tried

To accomplish the above, I've set the width of <input> and <a> to auto

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container’s width.

Recovered from The difference between width:auto and width:100%

Unfortunately, It didn't work. I also don't want to use fixed widths, for example, set <input> width to 20 pixels. Although it works, that is, it doesn't make <div> expand, it's too small.

score 3 · Accepted Answer · answered Jun 05 '21 at 05:29

Simple add transparent border on default state.

border: 3px solid blue;

.topnav {
  background-color: black;
  overflow: hidden;
}

.topnav a {
  box-sizing: border-box;
  color: white;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
}

.topnav a:hover {
  background-color: blue;
  color: white;
}

.topnav a.active {
  background-color: blue;
  color: white;
}

.topnav input[type=text] {
  display: inline-block;

  float: right;
  width: 20%;
  padding: 14px;
  border-radius: 1px;
  background-color: white;
  margin: 6px;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
border: 3px solid transparent;
}

.topnav input[type=text]:hover {
  border: 3px solid blue;
}

<div id='menu' class='topnav'>
  <a href='#1'>abcdefg</a>
  <a href='#2'>abcdefg</a>
  <a href='#3'>abcdefg</a>
  <a href='#4'>abcdefg</a>
  <input type='text' placeholder='Search here'>
</div>

Tanner Dolby · Answer 2 · 2021-06-05T05:57:24.440

3

Just add a transparent border like border: 3px solid transparent to the <input> elements initial style so space from the border is already allocated in the parent container for it and therefore doesn't make .topnav grow when the <input> is hovered.

The user agent stylesheet provides a default 2px border-width for input elements so when you try using width: auto and make the hover state border: 3px solid blue, we are seeing the border go from 2px to 3px and the parent container .topnav growing with it due to the <input> elements border increasing and occupying more space.

.topnav {
  background-color: black;
  overflow: hidden;
}

.topnav a {
  box-sizing: border-box;
  color: white;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
}

.topnav a:hover {
  background-color: blue;
  color: white;
}

.topnav a.active {
  background-color: blue;
  color: white;
}

.topnav input[type=text] {
  display: inline-block;
  float: right;
  width: 20%;
  padding: 14px;
  border-radius: 1px;
  background-color: white;
  margin: 6px;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  border: 3px solid transparent;
}

.topnav input[type=text]:hover {
  border: 3px solid blue;
}

<div id='menu' class='topnav'>
  <a href='#1'>abcdefg</a>
  <a href='#2'>abcdefg</a>
  <a href='#3'>abcdefg</a>
  <a href='#4'>abcdefg</a>
  <input type='text' placeholder='Search here'>
</div>

edited Jun 05 '21 at 05:57

answered Jun 05 '21 at 05:29

Tanner Dolby

4,253
3
10
21

@Nameless Does this help answer your question? – Tanner Dolby Jun 05 '21 at 05:35
@Nameless Yes It does. It's simpler than I expected and it works. However, I'm keen to know why setting the width to `auto` does not work. – Nameless Jun 05 '21 at 05:36
because height is still changing. also by default input elements have 2px border. – Taj Khan Jun 05 '21 at 05:38
@TannerDolby to Nameless – Taj Khan Jun 05 '21 at 05:40
@Nameless Was there a reason my answer wasn't accepted? Too lengthy? – Tanner Dolby Jun 05 '21 at 05:49
1

@TannerDolby You were second by some seconds. Plus, you have a higher rep than him but your answer is good. – Nameless Jun 05 '21 at 05:51
@Nameless Ah I see, makes sense. Also see my updated answer for more on why `width: auto` doesn't work. Hopefully that helps. – Tanner Dolby Jun 05 '21 at 05:52

How to make `` not expand when `` is hovered

Code

Goal

What I've tried

2 Answers2

How to make `
` not expand when `` is hovered