Change parent width on input child typing CSS only

Question

Is there a way to change parent width when ONLY input is target, not button.

I have tried :focus-within it works perfectly but when I click on button it also changes width because its within parent.

I also tried setting pointer-events: none on button.

What I want: When I first click on button don't resize parent width, only when input is in target, or only when I start typing, whatever.

I also tried with :placeholder-shown

.search-wrapper {
  position: relative;
  width:40%;
  transition: width .5s ease-in;
}

.search-input {
  border: 2px solid blue;
  width: 100%;
  height:40px;
}

.search-button {
  position: absolute;
  top:50%;
  right: 0;
  transform: translateY(-50%);
}

/*Make this to work*/
.search-wrapper:focus-within {
  width: 60%;
}

<div class="search-wrapper">
  <input class="search-input" type="text" placeholder="search ....">
  <button class="search-button">
    Button
  </button>
</div>

See here: w3schools.com/howto/howto_css_animated_search.asp

AbsoluteBeginner
– AbsoluteBeginner

2020-12-08 10:52:08 +00:00
Commented Dec 8, 2020 at 10:52 — AbsoluteBeginner
– AbsoluteBeginner, Commented Dec 8, 2020 at 10:52
@AbsoluteBeginner not what I want. There's no button

Andrea
– Andrea

2020-12-08 11:00:43 +00:00
Commented Dec 8, 2020 at 11:00 — Andrea
– Andrea, Commented Dec 8, 2020 at 11:00

Qaseem Saleem · Accepted Answer · 2020-12-08 11:02:25Z

1

You can achieve this by doing following tweaks. Although not the exact solution you are searching for since there is no parent selector to style parent based on child selector but it may help you out there.

.search-wrapper { position: relative; width:60%; transition: width .5s ease-in; } .search-input { border: 2px solid blue; width: 100%; height:40px; } 
.search-button { 
display:inline-block;
position:relative;
left: -55px;
top: 9px;
transform: translateY(-50%); } /*Make this to work*/ 
.input-wrapper{ width: 50%;
display:inline-block;
transition: width .5s ease-in;}
.input-wrapper:focus-within { width: 70%; }

<div class="search-wrapper">
  <div class="input-wrapper">
    <input class="search-input" type="text" placeholder="search       ....">
  </div>
  <button class="search-button">
    Button
  </button>
</div>

answered Dec 8, 2020 at 11:02

Qaseem Saleem

907 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change parent width on input child typing CSS only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related