What is the process for incorporating a button to the left of the search field?

Is it possible to enhance the search field by adding a button to make it more user-friendly?

Below is the code I have been using:

<div id="search">
  <div class="container">
    <h1>Search U.K. house price data</h1>
    <form class="has-success has-feedback has-feedback-left">
      <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
      <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
      <span class="glyphicon glyphicon-search form-control-feedback"></span>
      <button class="btn" type="submit">SEARCH</button>
    </form>
  </div>
</div>

This is the result I achieved with the provided code:

.btn {
position:absolute;
top: 20px;
right: 100px;

}

Answer №1

it may look something like this jsfiddle

Cascading Style Sheets (CSS)

.btn {
position:absolute;
top: 5px;
right: 10px;
padding-top: 0px;
padding-bottom: 1px;
border-radius: 18px;}
.form-control-feedback{
left:0;
}
#inputSearch{
  padding-left: 30px;
  border-radius: 18px;
}

HyperText Markup Language (HTML)

<div id="search">
 <div class="container">
 <h1>Search U.K. house price data</h1>
 <form class="has-success has-feedback has-feedback-left">
   <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
   <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
   <span class="glyphicon glyphicon-search form-control-feedback"></span>
   <button class="btn" type="submit">SEARCH</button>
  </form>
 </div>
</div>

Answer №2

To make the form match the height of the search bar, simply set the form's height to be the same as the height of the search bar and add a position: relative style.

Don't forget to adjust the button's top value accordingly.

Keep in mind that the form is the parent element of your button, so absolute elements look for the closest parent with a position: relative style and position themselves absolutely inside that parent's container.

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

Sending checkbox selections to JavaScript

I am currently exploring Angular by working on a chat application project. My main focus right now is on passing checkbox values to my JS code. I have included snippets of the code below. The issue I'm encountering is that I can't seem to retriev ...

How can you use the :not selector in CSS to target specific elements within a group?

Consider the following set of inputs: <div id="group"> <input id="uno" class="red"></input><br/> <input id="dos" class="red"></input><br/> <input id="tres" class="blue"></input><br/ ...

Creating a div that overlays other divs using html and css

On websites like Facebook and LinkedIn, there is a search box where you can type in your query and the results will display below it, covering up other content on the page. This functionality is shown in the screenshot below from LinkedIn. I am curious ab ...

Error encountered in my JavaScript file - Unexpected Token < found on line 1 of the loadash.js script

I am right at the end of creating a sample dashboard with charts using dc.js, but I have hit a roadblock with one error remaining. This error is causing an issue. Unexpected token < on line 1 for loadash.js. The loadash.js file is valid, but for som ...

Stop angular material css styles from affecting neighboring components

Currently, I have overridden the angular material style in my global SCSS style as follows: .mat-form-field-infix{ padding: 0.5em 0 0.5em 0 !important; } However, I now need to apply a different padding to the same element in my component for addition ...

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

"Eliminating Redundant JS and CSS Files in Magento to Improve

While analyzing the performance of a website, I noticed that GTmetrix found some CSS & JS files being loaded from different locations but containing the same file. An example: <action method="addItem" module="ves_blockbuilder" ifconfig="ves_blockbuilde ...

"Shuffle the Order of Divs Each Time the Page Loads

I have multiple divs labeled as "gallerycard". I want them to appear in a different random order each time the page is loaded. <div id="gallerycard"> <div id="name">Akulina</div> <div id="info">N/A</div> </div> ...

Utilize Vue.js to sort by price bracket and category

Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code: ul class="filter-wrapper"&g ...

Discoloration of images on HTML5 Canvas

When working with HTML5 Canvas and using the drawImage function, I've observed slight discoloration in certain browsers such as Google Chrome and Mozilla Firefox. Interestingly, Internet Explorer and Chrome Android do not exhibit this issue. The globa ...

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Encountering a problem with browsers (potentially Chrome) adding CSS rules on touch-enabled devices. In a website developed for a client (specifically for Chrome), the scroll bars disappear on elements when accessed from their ultrabooks. The client still ...

output a string from the write_html function in plotly

I am currently attempting to utilize plotly express to generate a string representation of a div object in HTML for integration with other packages. Although I have been following the documentation (Plotly v5.17.0), it seems that my attempts have not been ...

Experience unique website functionalities across Windows/Android and Apple ecosystems

Apologies for any language errors in advance. I'm facing an issue where my website appears differently on Safari or Chrome on iOS/MacOS compared to Windows 10 or Android devices. If you observe the List of Receiving Countries in the images provided: ...

Instructions on how to automatically play multiple video tags on one HTML page while also opening a modal

I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

Adjust the ARIA value of a Bootstrap progress bar within a VueJS component on the fly

During the development of my website using VueJS and Bootstrap, I made the decision to utilize Vanilla Bootstrap instead of a specific VueJS framework like VueBootstrap or VueStrap. Currently, I am facing an issue while building a custom component that wr ...

What is the trick to getting an accordion to expand when hovering, rather than when clicking?

Can the accordion be set to expand when hovering instead of clicking? Also, how can a different action be triggered on click? LATEST I was specifically referring to using the jQuery UI accordion widget for this functionality. ...

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

When it comes to loading jQuery, HTML5Boilerplate and other sources[citation needed] have a standard process that many are familiar with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window. ...

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Currently, I am in the process of validating my HTML contact form using PHP. To test its functionality, I have tried submitting the form with no data and then attempted again with partial data. While submitting partial data, I noticed that the correct fiel ...