CODEWITHSUNDEEP
htmlcss
BeerusDev
BeerusDev

Reputation: 1509

Displaying an Image in Search Bar HTML

I am finishing up this table and I added a search function to it. But in the search bar, I want to put a search icon png file for the background image just like the example on W3Schools. I put it in the myInput field, but either nothing appears in the search bar, or it is so massive you can see a tiny top corner piece of the search icon and I cant figure out how to fix it.

Post Background Size edit

Search box input element

#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.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">

Upvotes: 3

Views: 9950

Answers (2)

Marvin
Marvin

Reputation: 953

You need to use the background-size property. Because the image is larger than the input, you are seeing a white portion of the picture. By setting the property to contain the image is shrunk to the size of your input.

#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
<input placeholder="Search..." type="text" id="myInput">

Note: You should also set the background-position property to 0 or remove it all together; otherwise, the search icon will be skewed to the right and downwards. If instead you want to make the icon smaller, change background-position to left center and set background-size to a px value of your choice.

Upvotes: 4

Sybghatallah Marwat
Sybghatallah Marwat

Reputation: 312

HTML

<div class="fake-input">
    <input type="text" />
    <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>

CSS

.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }

Source is here

Upvotes: 0

Related Questions