Search bar with magnifying glass inside using CSS-CodePudding

I am trying to code a search bar with a magnifying glass icon inside the bar and no search button. I have found an example resource that I am basing my code after: Search Icon Inside Input.

I am having difficulty getting the magnifying glass icon to even appear. Also, there is the issue of the search bar itself not being vertically aligned within my primary-nav container.

I am using the URL encoder for SVG tool at URL Encoder for SVG Tool and the font awesome icon with the background tag:

<i ></i>

Here is a snippet of my style.css:

/* || PRIMARY MENU || */

.primary-nav {
    align-items: center;
    height: 50px;
    left: 0px;
    padding: 15px;
    width: 100%;
    margin: 0px;
    background-color: darkgray;
    display: inline;
    position: fixed;
    top: 70px;
    z-index: 3;
    font-weight: bold;
}

.search-container {
    align-items: center;
    display: flex;
    justify-content: right;
}

form .no-submit {
    width: 180px;
    align-items: center;
    color: white;
    right: 0;
    display: flex;
    padding: 2px;
    border: 1px solid currentColor;
    border-radius: 5px;
    margin: 0 0;
}

input .nosubmit {
    border: 1px solid white;
    width: 100%;
    padding: 9px 4px 9px 4px;
    background-image: transparent url("data:image/svg xml,") no-repeat 13px center;
    background-position: 10px center;
}

input[type="search"] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 7px 8px;
    font-size: 16px;
    color: inherit;
    border: 1px solid transparent;
    border-radius: inherit;
}

input[type="search"]::placeholder {
    color: white;
}

input[type="search"]:focus {
    box-shadow: 0 0 3px 0 #3f69a8;
    border-color: #3f69a8;
    outline: none;
}

As well as my navigation.php view:

 <div >
        <form >
            <input  type="search" placeholder="Search..." method="GET">
        </form>
    </div>

CodePudding user response：

There are a lot of issues in your code so let's go through them one by one.

1. Wrong selector

input .nosubmit isn't pointing at anything. Your class is named .no-submit and if you want to select input with the specific class you have to write it like this input.no-sumbit. Your selector is looking for .no-submit in input element.

2. Wrong usage of background

Here is a great example of how to use background in CSS. I haven't found usage of background where you write all parameters in a single property, as you did (I am not saying it doesn't work) so I decapsulated it into more properties. And when you want to add an image in url() better way is to insert the path to the image and not inside of the SVG file. For example, I choose a random magnifying glass icon and imported it like so:

 background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;

You can also import your local file it doesn't have to be online. Just change the URL for relative or absolute path to the SVG.

3. Using background when you need only background-color

It may not matter most of the time but in your code having background: transparent removes your background images so you need to use background-color: transparent.

I believe there are more mistakes in your code but these are the worst one and your code will not work with them.

Here is working code snippet:

/* || PRIMARY MENU || */

.primary-nav {
  align-items: center;
  height: 50px;
  left: 0px;
  padding: 15px;
  width: 100%;
  margin: 0px;
  background-color: darkgray;
  display: inline;
  position: fixed;
  top: 70px;
  z-index: 3;
  font-weight: bold;
}

.search-container {
  align-items: center;
  display: flex;
  justify-content: left;
}

form .no-submit {
  width: 180px;
  align-items: center;
  color: white;
  right: 0;
  display: flex;
  padding: 2px;
  border: 1px solid currentColor;
  border-radius: 5px;
  margin: 0 0;
}

input.no-submit {
  border: 1px solid white;
  width: 100%;
  padding: 9px 4px 9px 4px;
  /* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/
  /*background-image: url("data:image/svg xml,") ;*/
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 10px center;
}

input[type="search"] {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 7px 8px 7px 30px;
  font-size: 16px;
  color: inherit;
  border: 1px solid black;
  border-radius: inherit;
}

input[type="search"]::placeholder {
  color: white;
}

input[type="search"]:focus {
  box-shadow: 0 0 3px 0 #3f69a8;
  border-color: #3f69a8;
  outline: none;
}

<div >
  <form >
    <input  type="search" placeholder="Search..." method="GET">
  </form>
</div>

Also, I have added padding so the text isn't over your magnifying glass.