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. :/

Answer 1

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