Question 170409 in Html Question posted in
Some basic documentation can be found here.

Can HTML make an input field & button that move & resize together without moving other elements?

I have these text field and button for search and some other button:

button {
  font-family: Arial Narrow, sans-serif;
  font-size: 20pt;
}

.search {}

.search:after {
  content: "";
  clear: both;
  display: table
}

.search input {
  font-family: Arial Narrow, sans-serif;
  font-size: 20pt;
  width: 160px;
  height: 42px;
  padding-left: 15px;
  border-radius: 42px;
  border: 2px solid #404040;
  background: #FFDFBF;
  outline: none;
  position: relative;
  transition: .3s linear;
}

.search input:focus {
  width: 512px;
}

.search button {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  position: relative;
  left: -44px;
}
<DIV class="search">
  <INPUT type=text name="q">
  <BUTTON>🔎</BUTTON>
</DIV>
<BUTTON>Some other button...</BUTTON>
<BUTTON>Some other button 2...</BUTTON>

I need other buttons to be placed right of the text field when it is in the normal state but NOT to move when the text field is resized (they must be behind the field).

But the search button must remain bound to the right side of the text field.

Who knows how to do this?

Tags:

2

Answers


  1. 0 
    .search {
    display: inline-block;
}
    Login or Signup to reply.
  2. 0

    You need to wrap the content in div position: relative;, and make other button position absolute with left value width of input + spacing, and also give negative z-index to go behind the search input.

    Something like this:

    .container {
  position: relative;
}

.other-btn {
  position: absolute;
  top: 0;
  left: 200px;
  z-index: -1;
}

button {
  font-family: Arial Narrow, sans-serif;
  font-size: 20pt;
}

.search {}

.search:after {
  content: "";
  clear: both;
  display: table
}

.search input {
  font-family: Arial Narrow, sans-serif;
  font-size: 20pt;
  width: 160px;
  height: 42px;
  padding-left: 15px;
  border-radius: 42px;
  border: 2px solid #404040;
  background: #FFDFBF;
  outline: none;
  position: relative;
  transition: .3s linear;
}

.search input:focus {
  width: 512px;
}

.search button {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  position: relative;
  left: -44px;
}
    <div class="container">
  <div class="search">
    <input type=text name="q">
    <button>🔎</button>
  </div>
  <div class="other-btn">
    <button>Some other button...</button>
    <button>Some other button...</button>
  </div>
</div>

    Note: Also use lowercase for html tags, it’s a good practice. Refer this SO question for more info.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search