Adding an image to the right side of an input form to act as a search button: A step-by-step guide

Question

Adding an image to the right side of an input form to act as a search button: A step-by-step guide

I have been attempting to customize one of the navigation bars from a Bootstrap website. I would like to create a custom input form with a button that includes an external image. I have tried adjusting the CSS, but the code I was referencing was different and did not yield the desired result.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- NAVBAR -->
   <div>
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                          <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#">Post layout</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#" >Pages</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#">Shortcodes</a>
                          </li>
                          <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                          </li>
                    </ul>
                    <div class="search-bar">
                        <form class="form-inline my-2 my-lg-0">
                              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                              <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><img src="\searchicon.png"></button>
                        </form>
                    </div>
              </div>
         </nav>   
   </div>
    <!-- /NAVBAR -->
    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

html css bootstrap-4

Answer 1

Answer №1

Here's an example of how you could achieve this:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.container {
position: relative;
}
.image {
position: absolute;
top: 20px;
left: 50px;
}
.input-field {
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="input-field">
<button class="image"><img src="icon.png" alt="Icon" style="width: 20px;"></button>
</div>
</body>
</html>

Answer 2

Here's an example of how you could achieve this:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.container {
position: relative;
}
.image {
position: absolute;
top: 20px;
left: 50px;
}
.input-field {
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="input-field">
<button class="image"><img src="icon.png" alt="Icon" style="width: 20px;"></button>
</div>
</body>
</html>

Adding an image to the right side of an input form to act as a search button: A step-by-step guide

Answer №1

Similar questions

The button must stay deactivated even if the page is refreshed

Any ideas on how to align the links in the navbar at the center of the image instead of having them at the top?

Challenge encountered in handling AJAX response data for presentation

Prevent content from occupying unnecessary space below a sticky div

JavaScript code to dynamically change the minimum value of an input field when the page

Rapache and R team up for dynamic leaflet design

Issue with Submit Button Functionality in Django Form Submission

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is it possible to trigger an AJAX request twice?

Arrange the "See More" button in the Mat Card to overlap the card underneath

What is the best way to create horizontal lines that span multiple Bootstrap columns?

Tips for concealing a div upon reaching a specific scroll point, even with varying content sizes

Is there a way to center the text at 0% using text-align in Bootstrap?

Utilize Laravel's session messages for stylish toastr notifications

"Discrepancies Found: React app behaves differently between localhost and live

The getElementById function is unable to locate any matching results

iOS exhibits a flashy display of Material Select lighting up

Aligning a bootstrap button group at the center of a container

column with medium width of 4 is displaying oversized content