How to make submit buttons hover with form input focus

HTML & CSS
1

How to make submit buttons that will hover with form input focus. Like Firefox Browser home page search from

The HTML

   <form id="form-container">
    <!--<input type="submit" id="searchsubmit" value="" />-->
        <button class="search-submit-button" type="submit" href="javascript:void(0)">
            <i class="fa fa-search"></i>
        </button>
        <div id="searchtext">
                <input type="text" size="40" class="search-input" value="" name="s" id="s" placeholder="Search...">
        </div>
</form>

The css

#form-container input, select, textarea {
    background-color: #FEFEFE;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    -webkit-appearance:none;
    border-radius: 3px 0px 0px 3px;
    color: #5e5e5e;
    display: block;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0px 0 30px 0;
    height: 47px;
    }

#form-container input:focus {
    background-color: #fff;
    border: 1px solid #03C9A9;
    }
            
#searchtext {
    overflow: hidden;
    }
            
#form-container button.search-submit-button {
    background-color: #FEFEFE;
    border: 1px solid #ddd;
    -webkit-appearance:none;
    border-radius: 0px 3px 3px 0px;
    color: #555 !important;
    display: block;
    float: right;
    font-size: 20px;
    padding: 0px 14px;
    line-height: 1px;
    text-align: center;
    width: 47px;
    box-sizing: border-box;
    height: 47px;
    margin-left: -2px;
    cursor: pointer;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    
    }
#form-container button.search-submit-button:hover {
    background-color: #03C9A9;
    border: 1px solid #03C9A9;
    -webkit-appearance:none;
    color: #fff !important;
    border-radius: 0px 3px 3px 0px;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
    }
2

Hi,

You need the button to follow the input and then you can say something like input:focus + button {background :red}.

That means you can’t float the button right as it needs to be first in source for floating and you want it to follow the input text.

Firefox uses flexbox but the same effect could be achieved if you add some padding to the end of the search text and absolutely place the button there.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#form-container input, #form-container select, #form-container textarea {
    background-color: #FEFEFE;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    -webkit-appearance:none;
    border-radius: 3px 0px 0px 3px;
    color: #5e5e5e;
    display: block;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0px 0 30px 0;
    height: 47px;
}
#form-container input:focus {
    background-color: #fff;
    border: 1px solid #03C9A9;
    outline:0;
}
#form-container input:focus + button {
    border-color:#03C9A9;
    border-left-color:#ddd;
    background:#03C9A9;
}
#searchtext {
    overflow: hidden;
    position:relative;
    padding-right:45px;
}
#form-container button.search-submit-button {
    position:absolute;
    right:0;
    top:0;
    background-color: #FEFEFE;
    border: 1px solid #ddd;
    -webkit-appearance:none;
    border-radius: 0px 3px 3px 0px;
    color: #555 !important;
    display: block;
    float: right;
    font-size: 20px;
    padding: 0px 14px;
    line-height: 1px;
    text-align: center;
    width: 47px;
    box-sizing: border-box;
    height: 47px;
    cursor: pointer;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
}
#form-container button.search-submit-button:hover {
    background-color: #03C9A9;
    border: 1px solid #03C9A9;
    -webkit-appearance:none;
    color: #fff !important;
    border-radius: 0px 3px 3px 0px;
    -webkit-transition: all 0.20s ease-in-out;
    -moz-transition: all 0.20s ease-in-out;
    -ms-transition: all 0.20s ease-in-out;
    -o-transition: all 0.20s ease-in-out;
}
</style>
</head>

<body>
<form id="form-container">
        <!--<input type="submit" id="searchsubmit" value="" />-->
        
        <div id="searchtext">
                <input type="text" size="40" class="search-input" value="" name="s" id="s" placeholder="Search...">
                <button class="search-submit-button" type="submit" href="javascript:void(0)"> <i class="fa fa-search"></i> </button>
        </div>
</form>
</body>
</html>
3

Thanks you so much @PaulOB .
I got the everything that I needed.

Thanks again!
Sohail Sarwar.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.