Tips for adding a search button within the input field

My goal is to incorporate a circular search button at the end of an input field, but I'm struggling with the logic to achieve this. I am using Font Awesome to display the icons.

.search-box {
  outline: none;
  padding: 7px;
  padding-left: 10px;
  padding-right: 40px;
  height: 35px;
  width: 100%;
  border-radius: 30px;
  font-size: 15px;
  border-color: transparent;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
<input type="text" class="search-box" placeholder="Search For a Product..">

htmlcss

Answer №1

To create a visual appearance of a button next to an input element, you cannot actually place a <button> inside an <input>. However, you can achieve a similar effect by creating a containing element that mimics the look of the input field. Here is a suggestion:

.search-container {
  background-color: #FFF;
  position: relative;
  border-radius: 30px;
  padding: 3px 50px 3px 10px;
}
.search-box {
  background-color: transparent;
  outline: none;
  height: 35px;
  font-size: 15px;
  border: 0;
  width: 100%;
}
.search-button {
  position: absolute;
  right: 4px;
  top: 4px;
  background-color: #C00;
  border-radius: 50%;
  border: 0;
  color: #FFF;
  width: 35px;
  height: 35px;
  outline: 0;
}

body {
  background: #CCC;
}
<br /><br /><br />

<div class="search-container">
  <input type="text" class="search-box" placeholder="Search For a Product..">
  <button class="search-button">Go</button>
</div>

Answer №2

Give this a try:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Sample Page</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
      .search-box {
      outline: none;
      padding: 7px;
      padding-left: 10px;
      padding-right: 40px;
      height: 35px;
      width: 90%;
      border-radius: 30px;
      font-size: 15px;
      border-color: transparent;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box; /* Firefox, other Gecko */
      box-sizing: border-box; /* Opera/IE 8+ */
      }

      #filtersubmit {
      position: relative;
      z-index: 1;
      left: -25px;
      top: 1px;
      color: black;
      cursor:pointer;
      width: 0;
      }
    </style>
  </head>
  <body>
    <br><br>
    <div class="container">
      <input type="text" class="search-box" placeholder="Type to Search..">
      <i id="filtersubmit" class="fa fa-search"></i>
    </div>
  </body>
</html>

Give it a go and see if it works for you.

​

Answer №3

If you're looking to incorporate a button inside a text box, this code snippet may be just what you need.

/*Clearing Floats*/
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  zoom: 1;
}


/* Form wrapper styling */
.form-wrapper {
  width: 450px;
  padding: 15px;
  margin: 150px auto 50px auto;
  background: #444;
  background: rgba(0, 0, 0, .2);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}


/* Form text input */

.form-wrapper input {
  width: 330px;
  height: 20px;
  padding: 10px 5px;
  float: left;
  font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 0;
  background: #eee;
  border-radius: 3px 0 0 3px;
}

.form-wrapper input:focus {
  outline: 0;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
  color: #999;
  font-weight: normal;
  font-style: italic;
}

.form-wrapper input:-moz-placeholder {
  color: #999;
  font-weight: normal;
  font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
  color: #999;
  font-weight: normal;
  font-style: italic;
}


/* Form submit button */

.form-wrapper button {
  overflow: visible;
  position: relative;
  float: right;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 40px;
  width: 110px;
  font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
  color: #fff;
  text-transform: uppercase;
  background: #d83c3c;
  border-radius: 0 3px 3px 0;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.form-wrapper button:hover {
  background: #e54040;
}

.form-wrapper button:active,
.form-wrapper button:focus {
  background: #c42f2f;
  outline: 0;
}

.form-wrapper button:before {
  /* left arrow */
  content: '';
  position: absolute;
  border-width: 8px 8px 8px 0;
  border-style: solid solid solid none;
  border-color: transparent #d83c3c transparent;
  top: 12px;
  left: -6px;
}

.form-wrapper button:hover:before {
  border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before {
  border-right-color: #c42f2f;
}

.form-wrapper button::-moz-focus-inner {
  /* remove extra button spacing for Mozilla Firefox */
  border: 0;
  padding: 0;
}
<form class="form-wrapper cf">
  <input type="text" class="search-box" placeholder="Search For a Product..">
  <button type="submit">Search</button>
</form>

Fiddle

Source

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

unexpected issue when trying to append a child element after creating its innerHTML

Upon executing this script, I expect to see the initially empty div with id="checkboxes" transformed into: <div id="checkboxes"> <label><input type="checkbox">option1</label> <label><input type="checkbox">opt ...

javascripthtml

Transforming iframe programming into jquery scripting

Currently, I have implemented an Iframe loading the contents within every 5 seconds. It works well, however, there is a consistent blinking effect each time it loads which can be quite bothersome. I am looking to replace the iframe with a scrolling div so ...

javascriptphpjqueryhtmliframe

Using Geolocation in HTML5 and JavaScript

Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...

javascripthtmlgeolocation

What is the best way to format a time in a 12-hour clock using JavaScript?

Is it possible to create a timer that performs an action after 12 hours? I want the timer to start at 6am and end at 6pm, lasting for exactly 12 hours. Additionally, I'm interested in converting my current 12-hour clock into a 24-hour format. I am se ...

javascripthtmlcss

Could someone please advise me on how to prevent the second animation from being overridden?

After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...

htmlcssanimationcss-animationskeyframe

Changing the placement of navbar components in Bootstrap 4 based on screen size

Through the use of Bootstrap 4, I have successfully created a navbar that collapses into a button when the screen size decreases. However, I am facing an issue where one item (the icon image) gets centered while the rest of the items are aligned to the lef ...

htmlcssbootstrap-4

Switch up the link color when it pops up

Is there a method to change the link color to gray without encountering glitches like on my site, where it mistakenly shows "Quick Nav."? Click here to view the page with the glitch I only want this particular link to be bold and not any other links. He ...

javascripthtmlcsspopup

Changing the visibility of a div with an onClick event in React

Can anyone help me figure out how to toggle the display of this div on click? I've been struggling with it for a while now. Any suggestions are welcome. https://i.sstatic.net/lPZtN.png https://i.sstatic.net/8Pybg.png ...

javascripthtmlreactjs

Issues with the drop-down menu in the <s:select> element arise when attempting to set the

While utilizing a Map to populate the Struts2 tag <s:select >, I have noticed that when the form is submitted multiple times, a blank line is added at the end of the list. For example, if the Map contains 2 key-value pairs, it displays 3 records and ...

javascripthtmlformsjspstruts2

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

I have successfully implemented a JavaScript Google Maps functionality, but now I am facing an issue where I need to retrieve the type of HTML control and set it to JavaScript. Specifically, when attempting to extract the value from lblTitle, it is not f ...

javascripthtmlasp.netgoogle-maps

The Bootstrap Grid System Column is Experiencing Issues

Check out my code snippet: I've attempted changing the container class to container-fluid and resizing the page, but no luck. <div class="container"> <div class="row"> <!--Product: banana split--> ...

htmlcssbootstrap-5col

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui

I'm having trouble getting my HTML page to display appended text. What could be causing the issue?

let mainDiv = document.getElementById("main"); let myParagraph = document.createElement("p"); let myTextNode = document.createTextNode("hello"); myParagraph.append(myTextNode); mainDiv.append(myParagraph); let max = 25; let on ...

javascripthtml

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

css

Discovering the flaw in my programming that pertains to JSON parsing

After countless hours of searching and reviewing documentation, I am still unable to identify the issue with my jQuery code. My goal is to practice reading a local JSON file and displaying its contents in the body of my HTML document. $(document).ready(fu ...

javascriptjqueryhtmljson

Adaptable triple-column design

After completing the layout of my website, everything seems to be functioning well. However, I would like to ensure that I haven't overcomplicated it or used poor techniques. The structure involves a main DIV with a nested table DIV, inside of which ...

htmlcssresponsive-design

The issue with height percentages being ineffective in CSS

My goal is to utilize the height property with percentages, however it seems to be ineffective. I desire to use percentages so that the layout appears well in various resolutions. <div id="bloque_1" style="height: 80%;background: red"> </div> ...

htmlcssheight

Ensure that only numerical values in decimal form are permitted when entering data in Angular

How can I restrict user input to only decimal values? Here is the HTML code for my input field: <label for="conversion-factor">Conversion Factor:</label> <input type="text" class="form-control form-control-sm" id="conversion-factor" ...

javascripthtmlangulartypescript

D3.js: Unveiling the Extraordinary Tales

I'm currently working on a project that requires me to develop a unique legend featuring two text values. While I have successfully created a legend and other components, I am facing difficulties in achieving the desired design. Specifically, the cur ...

javascripthtmld3.js

Developing a countdown timer with an initial value set by the user in an input field

Whenever I click the button, the countdown only advances by one digit before stopping. It seems that the countdown is reverting to the initial value entered in the input box. My goal is to have the initial value entered in the input field set as the starti ...

javascripthtml