How can I style a submit form button with a custom background image?

I'm struggling to apply a background image to my submit button within a form. Despite trying different methods, I keep getting the default browser button. Can anyone pinpoint where my mistake might be?

HTML

<div id="headerSearch">
    <form method="post" action="Test.php">
        <div id="headerSearchBar">
            <input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
        </div>
        <div id="headerSearchBtn">
            <input class="btnSearch" id="button" name="submit" type="submit" value="">
        </div>
    </form>
</div>

CSS

#headerSearch{
    float:right;    
    width:80%;
    height:80px;
}
#headerSearchBar{
    float:left;
    width:90%;
    height:80px;

}
.tbSearch{
    height:25px;
    width:95%;
    margin-top:27.5px;
    margin-left:2%;
    margin-right:0;
    margin-bottom:0
}
#headerSearchBtn{
    float:right;
    width:10%;
    height:80px;
    text-align:center;
}
.btnSearch{
    background-image:url(../IMAGES/btnSearch.svg) no-repeat;
    width:25px;
    height:25px;
    margin-top:27.5px;
}

Answer №1

Only utilize the background property for this task.

background-image:url(../IMAGES/btnSearch.svg) no-repeat;

Answer №2

I found a solution to the problem by following Michael St Clair's advice and using just background instead of background-image in the CSS. This change successfully removed the default browser image and displayed my selected image.

I had previously attempted a different approach with the background-image tag, but switching to using only background as suggested by Michael St Clair ultimately resolved the issue.

HTML

<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">

CSS

.btnSearch{
    width:25px;
    height:25px;
    margin-top:27.5px;
}

input#btnSearch{
    background:url(../IMAGES/btnSearch.svg) no-repeat;
}

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

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

Clicking a button with Java Selenium

While trying to navigate all the pages on a website, I encountered an issue where after scrolling to the second page, I received an exception stating that the element does not exist on the page. Upon further investigation, I realized that the CSS selecto ...

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

Can a popup code be created to automatically open both a link and an image side by side? ...

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

VueJS3 and Vuetify are in need of some additional CSS classes

We are currently in the process of upgrading our application from old VueJS+Vuetify to VueJS3. However, we have encountered some classes defined in the template that are not available in the new version. These classes include xs12 (which is intended to co ...

Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...

Incorporate a class into the fixed navigation menu using fullpage.js

I am attempting to modify the behavior of a sticky menu as the user scrolls down using fullpage.js. My goal is to have the #top-wrapper behave normally when the first section/page loads, and then add a class of is-fixed as you scroll down. When scrolling ...

Blurring images with a combination of jQuery Backstretch and Blurjs

I have a background image displayed using Backstretch and want to apply Blur.js to blur elements on top of it. However, when I try to use Blur.js on the backstretched image, it doesn't work. I believe this is happening because Blur.js uses the CSS pro ...

Embedding HTML React project content onto a webpage using a script

I work for a company that specializes in event management, and we are looking to implement a "content builder" on our event portal. The project involves using React and Next. How can we create a code that allows event organizers to embed their events on ...

The optimal CSS selector for targeting a specific class

Within my CSS stylesheet, I have defined a class called myclass .myclass { background-color: 'green'; } This class is dynamically added to elements on my webpage. However, if there are more specific selectors like input[type='text'] ...

I recently created a Python3 script utilizing selenium to automate message sending, but unfortunately, it is not functioning as expected

I've written a script (https://pastebin.com/dWLFvirn) that I'm trying to run through the terminal, but it's giving me an error. Here's a screenshot of the error (https://ibb.co/NSfLgL8). I would like to use "" as the link to make the s ...

The issue of column sizing in bootstrap 4 needs to be resolved

I'm having trouble making the form input fill the width of the screen on small devices. It works fine on larger screens but doesn't respond properly on phones like it should. <div class="container-fluid"> <div class="row"> ...

jQuery Ajax form submission encountering issues

I created a form dynamically with the help of jQuery. Here is the code: <form id="editorform" accept-charset="utf-8" method="post" name="editorform" action="menuupdate"> <div> <input id="updateItem" type="submit" value="Update"& ...

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

Ways to automatically update a page once the form response is received

After scouring various websites, I still haven't found a solution to my issue. What I need help with is how to refresh a page once a successful deletion message is received for a specific row. My admin2.php page displays information about the admin fr ...

Alignment of text in a stationary element's location

I'm working on implementing a feature for an online shop where new items are added to the cart, and I want to display the number of new items added. However, I am facing a challenge in centering the text that displays the number, especially when the n ...

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

On my AngularJS Home Page, I am trying to scroll to an anchor tag on another page. Both pages are loaded as partial html files into the ng-view component based on the URL. When I start the server, the home page loads and then I need to navigate to the FAQ ...

What is the process for creating a beveled edge on a block div?

I am working on an HTML document that includes a DIV tag with specific styling: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>DIV Tag</title> <style type="text/css"> ...

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...