Step-by-step guide on designing a search bar integrated with an image submit button

I have a task to replicate the search bar design of Google Images.

This is the current state of my html code:

        <form id="search"; action="https://www.google.com/images">
        <input type="text" name="q">
        </form>

Along with the corresponding css:

input[type="text"]{
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
width: 600px;
height: 25px; 
padding: 12px 20px;
border-color: lightgrey;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
background-size: 25px;
padding-left: 50px;
outline: none;
}

Even though I managed to place the image inside the search bar, it doesn't function as intended. My goal is for the image to redirect to a specific link upon clicking.

htmlcss

Answer №1

It is not possible to directly insert a button inside an input element (like a text box in your scenario). My solution involves positioning a button on top of the text box using CSS and HTML modifications:

.search {
display: inline-block;
box-sizing: border-box;
line-height: 20px;    
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
box-sizing: border-box;
line-height: 20px;
height: 30px; 
vertical-align:middle;
padding: 12px 20px;
}

.textbox {
 border-color: lightgrey;
 width: 600px;
}

.submit-button {
background-image: url("path/to/your/button/image.png");
line-height: inherit;
text-decoration: none;
cursor: pointer;
width: 35px;
background-position: 5px;
background-repeat: no-repeat;
background-size: 20px;
background-color: transparent;
margin-left:-45px;
border:none;
}
<form id="search" method="get" action="https://www.example.com">
   <input class="search textbox" type="text" name="query">
   <input class="search submit-button" type="button" type="submit" value="">
</form>

You will need to replace the icon URL and adjust the styles as needed for your design.

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

What steps can be taken to resolve the delay in transition when clicking on "read less

I implemented a transition effect for the Read More and Read Less buttons, however, there seems to be a delay on the transition when clicking on the Read Less button. This delay was not intentionally set by me. How can I resolve this issue and also apply a ...

javascriptcssreactjs

Beginning the phone application using either HTML5 or Cordova

Is there a way to use either HTML5 or Cordova (PhoneGap) to initiate a call to a phone number? I am looking to create a button that says "Call 555-555-5555", and when clicked, it opens the phone app on the device with that specific number. ...

htmlcordova

What is the best approach to choose the thead element from a dynamically created table?

My table in JavaScript/JQUERY is dynamically constructed. Once the table is created, I am attempting to target the thead element. Here is a snippet of my code: $(document).ready(function(){ buildTbl(); }); function buildTbl() { var tbl = '< ...

javascriptjqueryhtmlhtml-tablejquery-selectors

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

Utilizing a Jquery plugin for enhanced form validation with the inclusion of supplementary techniques

I am looking to integrate a jQuery plugin into my form validation process, specifically to ensure that only letters are allowed in the name section. If a user enters special characters or numbers, I want the form to display an error message. Additionally, ...

javascriptjqueryhtmlformsvalidation

``Look at that cool feature - a stationary header and footer that stay in place

I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...

javascriptjquerycssajax

Creating a standalone Wordpress child theme with its own CSS

After creating a child theme based on the responsive i-transform theme from http://templatesnext.org/itrans/, I found myself continuously undoing the i-transform CSS, which is taking up a lot of my time. However, if I remove the entire parent stylesheet, t ...

htmlcsswordpress

Mathematics: When the numbers just don't add up

Can you help me figure out this calculation? €70.00 Total VAT €12.6 Total €82.59 I'm puzzled as to why the total jumps from 12.6 to 82.59. Is there a known issue causing this discrepancy? ...

htmlasp.net

Creating an a-expanded attribute with the value set to "true" for styling purposes

Is it possible to utilize the expanded attribute for styling using CSS? I have a dropdown with the following attribute: expanded="false" When the dropdown is open, the attribute changes to: expanded="true". Since there is no specific class assigned, I ...

css

Are there alternative methods to improve the responsiveness of a column layout?

Check out this codesandbox I created to display my current status. When you change the column-count to three, a significant amount of information becomes hidden because it doesn't scroll. I've attempted using grid and flexbox layouts, but everyt ...

cssreactjsstyled-components

How can we extract text from a div containing a Mark tag using Selenium WebDriver?

When using Selenium Webdriver, how can I extract the complete text from a div with a Mark tag? I am trying to confirm if the word 'correctly' appears within it. Below is an example of HTML code: <div class="faq-node-body"> blah ...

javahtmlseleniumselenium-webdriverxpath

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

storing the input values in a cache

When a user enters a query into the search form and submits it, they are taken to a results page displaying the search results. If the user then clicks on the browser's back button, I want them to be directed back to the search form with their previou ...

javajqueryhtml

In search of a comprehensive AJAX-enabled content management system

Is there a Content Management System (CMS) available that can create a fully ajax-driven website, allowing for a persistent Flash component without the need to reload it with each page navigation? ...

javascripthtmlajaxflashcontent-management-system

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

Is there a way to have line breaks done automatically within the <pre> tag?

Struggling to insert a code snippet into my React application, it's odd that no matter what I try, the format doesn't include line breaks. Below is the code snippet: import React from 'react'; import './Hello.scss'; const ...

javascripthtmlcssreactjs

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

I've encountered an issue with my popup ajax form. Instead of staying on the same page after data submission, it redirects me to send.php file. This behavior is different from another website where I successfully implemented a similar form. I'm n ...

phpjqueryhtmlajaxforms

Utilize the concept of nesting rows within table data cells

I'm having trouble implementing nested rows within a td element that span the full length. Here is my code: <td> <table class="table table-striped"> <tr> <td colspan="3">I am nested in a table column< ...

htmlhtml-table

Adding an icon to indicate that the last reading date is over 24 hours old - how to do it!

Within my HTML, I have the following code snippet: {{hsParametersLastRead.readingDate | date:'medium'}} In my controller, I am using this code: $http.get(hsParametersLastReadEndpoint).success(function (hsParametersLastRead) { $ ...

javascripthtmlangularjs