How to show a text field upon hovering a button with just pure CSS?

Question

Is there a way to only use pure CSS code to show a text field when you hover a button?

<form id="demo">
    <input type="text" id="search-field" name="s" placeholder="Search">
    <input type="submit" id="search-icon">
    <i class="fa fa-search"></i>
</form>

The text field should be hidden and only shows up when you hover the button. I'm not sure it can be done through CSS only. :/

This looks like a usability nightmare. In the provided answers, you can't even click on the text field (though you can tab to it). Where are all these upvotes coming from? — thirtydot, Sep 01 '16 at 09:35

score 10 · Answer 1 · edited May 23 '17 at 11:45

10

Try this code:

#search-field {
    display: none;
}
#btn:hover + #search-field {
    display: inline-block;
}

<form id="demo">
    <input type="button" value="Hover" id="btn" />
    <input type="text" id="search-field" name="s" placeholder="Search" />
    <input type="submit" id="search-icon" />
    <i class="fa fa-search"></i>
</form>

Updated

Swap your inputs in the HTML and rearrange your elements using the order property and apply display:flex; to your container in CSS. That would solve it.

#search-field {
    visibility: hidden;
}
#search-icon:hover + #search-field {
    visibility: visible;
}
#demo {
    display: flex;
}
input:nth-child(2) {
    order: -1;
}

<form id="demo">
    <input type="submit" id="search-icon" />
    <input type="text" id="search-field" name="s" placeholder="Search" />
    <i class="fa fa-search"></i>
</form>

Check: https://stackoverflow.com/a/36118012/5336321

edited May 23 '17 at 11:45

Community

1
1

answered Sep 01 '16 at 05:23

Hitesh Misro

3,397
1
21
50

It works given with that new input. But can this work, #btn:hover + #search-field{ visibility:visible;} using the "submit" input type? – user12109321358 Sep 01 '16 at 05:31
There are no selectors to do that in css but you can do this using flex and reversing the order https://jsfiddle.net/b7snbomk/ or use JS or jQuery – Hitesh Misro Sep 01 '16 at 05:41
@user12109321358 you can place `submit` button before `input` – Mohammad Usman Sep 01 '16 at 05:51
check my updated answer if that could help you get after this! – Hitesh Misro Sep 01 '16 at 05:57
you can do as suggested by @Muhammad Usman if you're not bothered about the positions – Hitesh Misro Sep 01 '16 at 06:01
1

Just gave up on my codepen... about 30 lines of code and getting there... you do it in like 8... haha nice job – Ricky Sep 01 '16 at 06:16
Glad you value it @Ricky :) – Hitesh Misro Sep 01 '16 at 06:20
Hitesh, thank you!! That worked!! And now I know how flex and order really works. :P Thanks!! :) – user12109321358 Sep 01 '16 at 06:25
1

Nice, but why you used `input:nth-child(2)` instead of just `#search-field`. I didn't understand that part. – Mr_Green Sep 01 '16 at 06:26
The input fields have 2 different ids so i triggered with the element selector `input`. instead you can use a class with same name `.class_name:nth-child(2)` – Hitesh Misro Sep 01 '16 at 06:30
By the way, do the inputs need to be swapped? – user12109321358 Sep 01 '16 at 06:36

score 2 · Answer 2 · answered Sep 01 '16 at 05:58

You can swap the order of input[type="text"] and input[type="submit"] and then you can style input[type="text"] on hover of button as shown below.

#demo {
  position: relative;
  padding-top: 30px;
}
#search-field {
  transition: opacity 0.25s linear;
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
}

#search-icon:hover + #search-field {
  opacity: 1;
}

<form id="demo">
  <input type="submit" id="search-icon" />
  <input type="text" id="search-field" name="s" placeholder="Search" />
  <i class="fa fa-search"></i>
</form>

How to show a text field upon hovering a button with just pure CSS?

2 Answers2