changing the width of the text input when hover

Question

i am a beginner at CSS. i am trying to change the width of the input to 120px when i hover over the search text. how do i do it? i have try few code, but it doesn't seem to work.

html

<body>
    <div class = "search-box">
    <input class="search-text" type="text" placeholder="type something">
    <a class="search-button" href="#">search</a>

    </div>
</body>

CSS

a:hover + .search-text{`
width:125px;
}

Use the linked question, and reverse the DOM order. – 0stone0 Jul 14 '21 at 13:45 — 0stone0, Jul 14 '21 at 13:45

0stone0 · Answer 1 · 2021-07-14T13:58:25.857

Css

There isn't a nice CSS selector that allows us to target a element when an other element is behing hovered.

There is a way, described in this question, but that expects the element to exist after the hover element seen in the DOM. Your current HTML is reversed, so that wont work.

The easiest way, in my opinion, is to use flex-direction to reverse the DOM element so we can use the 'hack' described in the linked post.

Example:

a:hover ~ .search-text {
  width:200px;
}

.search-box {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.search-button {
  margin-left: 10px;
}

<div class = "search-box">
  <a class="search-button" href="#">search</a>
  <input class="search-text" type="text" placeholder="type something">
</div>

NB: Since the <input> is getting larger, the mouse isn't hovering on the element anymore, therefor it will shrink again, letting the mouse back over the element, this causes the weird jumping effect.

jQuery

Of course we can create a jQuery based solution using the mouseover and mouseleave events. This way we

Don't need to change the DOM order
Prevent the <input> jumping by checking on mouseleave on the <input> instead off the <a>

Example:

let i = $('.search-text'),
    a = $('.search-button');
i.width(150);

a.on('mouseover', function() {
    i.width(300);
});

i.on('mouseleave', function() {
    i.width(150);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "search-box">
  <input class="search-text" type="text" placeholder="type something">
  <a class="search-button" href="#">search</a>
</div>

score 0 · Answer 2 · answered Jul 14 '21 at 13:44

0

Try this: CSS

.search-text:hover{
width: 120px;
}

<body>
    <div class = "search-box">
    <input class="search-text" type="text" placeholder="type something">
    <a class="search-button" href="#">search</a>

    </div>
</body>

NB : you are trying to decrease the width.

answered Jul 14 '21 at 13:44

Sajid

9
1

"when i hover over the search text", this works when hovering over the search field, not text. – 0stone0 Jul 14 '21 at 13:45
@Sajid i want to hover over anchor tag not input tag – Abhinav K Jul 14 '21 at 13:46

Gulshan Aggarwal · Accepted Answer · 2021-07-14T14:13:43.907

0

To do this without Javascript you will have to wrap your input element inside of a(anchor) tag something like this--

try out the code below

a:hover .search-text{
  width: 120px;
}

<div class = "search-box">
      
      <a class="search-button" href="#"><input class="search-text" type="text" placeholder="type something">search</a>
  
      </div>

edited Jul 14 '21 at 14:13

answered Jul 14 '21 at 13:49

Gulshan Aggarwal

954
1
7
13

I hope this will help you Thank you!! – Gulshan Aggarwal Jul 14 '21 at 13:50
"when i hover over the search text", this works when hovering over the search field, not text. – 0stone0 Jul 14 '21 at 14:00
actually now I have your issue you want to hover over text field now it's working fine! – Gulshan Aggarwal Jul 14 '21 at 14:03
@GulshanAggarwal not textfield, i want to hover over anchor tag `` – Abhinav K Jul 14 '21 at 14:10
@AbhinavK my previous answer I fixed it for hover over anchor tag but you were still had issues! – Gulshan Aggarwal Jul 14 '21 at 14:11
@GulshanAggarwal this is fine but, still doesnt work. my `` is not a container/parent so `a:hover .search-text` won't work – Abhinav K Jul 14 '21 at 14:16
@AbhinavK please copy the whole code which I have fixed then try and then let me know! – Gulshan Aggarwal Jul 14 '21 at 14:18
@AbhinavK I hope you will understand! – Gulshan Aggarwal Jul 14 '21 at 14:18
@GulshanAggarwal i think i got it now! i missed to see that you have wrapped `` inside '' thanks a lot! – Abhinav K Jul 14 '21 at 14:23
@AbhinavK I'm happy to see you got your answer and satisfied. Thankyou!! – Gulshan Aggarwal Jul 14 '21 at 14:25

score 0 · Answer 4 · answered Jul 14 '21 at 13:51

0

From 0stone0 answer :)

.search-box:hover > .search-text {
  width:125px;
}

<body>
    <div class = "search-box">
    <input class="search-text" type="text" placeholder="type something">
    <a class="search-button" href="#">search</a>
    </div>
</body>

answered Jul 14 '21 at 13:51

Nikola Pavicevic

21,952
9
25
46

Uhmn, please add some details? Not sure what you're trying to achieve with this answer. – 0stone0 Jul 14 '21 at 14:01
change the width of the input to 120px when i hover over the search text – Nikola Pavicevic Jul 14 '21 at 14:06
OP means the literal 'search' text, not the input field. – 0stone0 Jul 14 '21 at 14:08

score -1 · Answer 5 · answered Jul 14 '21 at 14:03

.searchbox > input[type='text']{
  border : 1px solid rebeccapurple;
  outline: none;
  transition : 0.7s;
}


.searchbox > input[type='text']:hover{
  padding-right: 300px; 
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
    <div class="searchbox">
      <input type="text" placeholder="search">
    </div>

  </body>
</html>

This does not answers OP question, he want the input to enlarge when hovering on the search text~ — 0stone0, Jul 14 '21 at 14:04

changing the width of the text input when hover

5 Answers5

Css

jQuery