CSS search icon malfunctioning

Within my CSS, I have included the code snippet below:

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

This code creates a search box with the following HTML structure:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

The current appearance of the search box is shown here: https://i.sstatic.net/UEtbL.png

My desired look for the search box is illustrated in this image: https://i.sstatic.net/RlvP3.png

Please keep in mind that the search icon file used is stored in the css folder. This example is inspired by this website.

htmlcss

Answer №1

It appears that the way you are referencing the image in your file structure may not be correct.

Consider this alternative:

background-image: url('css/searchicon.png');

OR try this option instead:

background-image: url('https://www.w3schools.com/css/searchicon.png');

Answer №2

From my experience, it appears to be functioning as expected. However, I recommend verifying that the image path is accurate and ensuring that the CSS file is properly linked in the HTML code.

Answer №3

It's possible that the link to your image is incorrect. Please verify it and let me know if there was an issue.

Answer №4

Your statement reads: "My CSS folder contains the PNG file."

Can you confirm if the CSS folder is located at the same level as your HTML file?

If it is, you can use this code to reference the image: 

background-image: url('css/searchicon.png');

Answer №5

When it comes to the URL path, its significance lies in determining the location of the CSS style sheet. The relative path to the image will depend on where your style sheet is placed.

Partial URLs in CSS are interpreted relative to the source of the style sheet:

BODY { background: url(yellow) }

Reference: https://www.w3.org/TR/REC-CSS1/#url

As mentioned by others, it's important to ensure that your URL path is accurate. Here's an example:

#myInput {
  background-image: url(https://www.w3schools.com/css/searchicon.png);
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

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

jQuery search and filter functionality ineffective for unordered list of states and cities

CONTEXT: I am aiming to display a list of States initially. There are two options: either clicking on a state will reveal the respective cities, or using the search box will filter cities across all states - clearing the search will hide everything. ISSU ...

jqueryhtmlsearch

Looking for assistance in implementing specific styling techniques with React

Trying to implement a slider on my React page sourced from a Github repository. The challenge lies in adding the CSS as it is in JS format. Even after incorporating webpack and an npm compiler, the styling seems unrecognized. Any suggestions or solutions ...

javascriptcssreactjs

What is the best way to set the exact pixel width for a sidebarPanel?

Is there a way to define the precise width of a sidebarPanel in pixels instead of using the width argument? I have found that the width option is not precise enough for my needs. library(shiny) ui <- fluidPage( sidebarLayout( sidebarPanel(widt ...

cssrshiny

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...

htmlcsswordpress

Tips for converting plain text output into HTML tags

I recently set up a contact form 7 on my website, and I'm trying to customize the message that appears after submission. However, I'm running into an issue when attempting to split the message into two different colors. I created a span class to ...

phphtmlcsswordpress

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

htmlcssasp.netvb.net

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

javascripthtmlcssonhoverjsblocks

Ways to broaden the map of a variable in SCSS

Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the document ...

cssvue.jssassbulmabuefy

What is the best way to display value in a dropdown option field using Laravel?

I am currently working with 3 tables: hosts, visitors, and visitor_types. My objective is to display the host name and visitor type in a drop-down option button. However, I find myself a bit perplexed when it comes to the controller and route code. I have ...

phphtmlcsslaravel-5bootstrap-4

Crafting the Perfect HTML Table Layout

I'm working on a rather intricate table that needs to be created. I've managed to create a simple one, but I could use some guidance on how to proceed. Desired Table Structure Current Table Structure <table class="ccTbl" border="0" cellpadd ...

htmlhtml-table

Learn how to dynamically insert data retrieved from a database into a PHP database table

After fetching data in a tabular format from the database, I noticed that three columns of the table are retrieved directly while the remaining two consist of drop-down lists and checkboxes. Now, my challenge is to extract data from the retrieved rows and ...

phphtmlforms

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

javascriptangularjshtmlangularjs-directivengtable

Validation (CSS 2.0): The CSS property name 'mso-number-format' is unrecognized and invalid

I am currently tasked with maintaining an ASP .Net application that includes a feature to export HTML tables to Excel. The HTML code includes elements like this: <td style="mso-number-format:\@;"> During the build process, I encounter an error s ...

cssexport-to-excel

Accessing CSS content from a bundle within the code of an ASP.NET MVC website

I have a website that utilizes bootstrap along with a customized bootstrap theme. The website is designed to send notification emails to its users upon certain actions being triggered. For these notification emails, I want the content to be in well-format ...

cssasp.netbundleresourcebundleserver.mappath

Getting Bootstrap columns to work well with Angular ng-show

I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hid ...

javascriptcssangularjstwitter-bootstrap

[Tech Issue] encountering app crash upon running npm start command in terminal

My code and the package.json are provided below. I have reviewed similar issues, but the error codes I encountered differ from mine. How can I prevent crashing and successfully run the app? The goal is to have a local site that opens a home page allowing ...

htmlnode.jsexpress

Vue Labyrinthine Design theme

Looking for some guidance from experienced developers out there! I'm currently exploring how to incorporate Mazeletter as a background feature for each page in an app project I've been working on. This is all new territory for me, so any assista ...

cssvue.jsdynamicvuejs2background

Tips for coloring just the letters and excluding the Bengali Kar symbol

The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ. My goal is to highli ...

htmlcssunicodediacriticsaccent-sensitive

What is the method for selecting the "save as" option while downloading a file?

Imagine a scenario where you click on a link like this: <a href="1.txt">Download</a> After clicking the link, a save as window will appear. Is it feasible to utilize JavaScript in order to simulate button clicks within that window? Alternativ ...

javascripthtmlgoogle-chrome

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass