Making sign travel inside of search bar

O.w · April 2, 2021, 8:51am

Hi

I am making a search bar. I have taken and pasted form a ot of different sources. The result is that is displays the search-sign icon outside of the search field.

Please let me know how to get that bugger inside of the serach field. It is now hovering outside it like the image shows:

Code is like this:

  <section class="container">
        <label for="search_bar">Search </label>   
        <input class="search_bar" 
               name="search_bar" 
               type="search" 
               placeholder="Search">
               <a href="#">
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="375.045 607.885 30.959 30.33" enable-background="new 375.045 607.885 30.959 30.33" xml:space="preserve">
					<path fill="#494949" d="M405.047,633.805l-7.007-6.542c-0.129-0.121-0.267-0.226-0.408-0.319c1.277-1.939,2.025-4.258,2.025-6.753 c0-6.796-5.51-12.306-12.307-12.306s-12.306,5.51-12.306,12.306s5.509,12.306,12.306,12.306c2.565,0,4.945-0.786,6.916-2.128 c0.122,0.172,0.257,0.337,0.418,0.488l7.006,6.542c1.122,1.048,2.783,1.093,3.709,0.101 C406.327,636.507,406.169,634.853,405.047,633.805z M387.351,629.051c-4.893,0-8.86-3.967-8.86-8.86s3.967-8.86,8.86-8.86 s8.86,3.967,8.86,8.86S392.244,629.051,387.351,629.051z"/>
				</svg>
            </a>    
      </section>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

*, *:before, *:after{
  box-sizing: border-box;
  font: 300 1em/1.5 'Open Sans', 'Helvetica Neue', Arial, sans-serif; color: #666;
  padding: 0; margin: 0;
}

html, body{background: rgb(236, 240, 241);}

section.container{
  width: 40%;
  min-width: 300px;
  margin: 20% auto;
}
  label{display: none;}
  input.search_bar{
    border: none; outline: none;
    width: 75px;
    border-radius: 55px;
    margin: 0 auto;
    font-size: 2em; color: #0d2840;
    padding: 25px 70px 25px 35px;
    transition: all .3s cubic-bezier(0,0,.5,1.5);
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
    background: rgb(255, 255, 255) url(https://i.imgur.com/seveWIw.png) no-repeat center center;
  }
  input.search_bar:focus{width: 100%; background-position: calc(100% - 35px) center}

  /*Removes default x in search fields (webkit only i guess)*/
  input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
  /*Changes the color of the placeholder*/
  ::-webkit-input-placeholder{color: #0d2840; opacity: .5;}
  :-moz-placeholder{color: #0d2840; opacity: .5;}
  ::-moz-placeholder{color: #0d2840; opacity: .5;}
  :-ms-input-placeholder{color: #0d2840; opacity: .5;}

DanCouper · April 2, 2021, 11:19am

The CSS doesn’t seem to have anything to do with the HTML, and doesn’t seem to relate to the image. Can you put this example on CodePen to make it a bit easier to see what you’re trying to do?

O.w · April 3, 2021, 7:27am

Oops. It was CSS from another prototype.

Now I have changed it and now it is the right CSS I believe. Perhaps you know something about how it should be done now?

I want the sign to be INSIDE the search bar. Not outside like now. Not sure what I am doing wrong

O.w · April 5, 2021, 9:38am

I have now managed to get the sign inside of the container. But now I want to find a command that makes the sign disappear or flow to the right of the container when it is clicked and expands. Code and image looks like this now. Give me some ideas on how I can make the sign disappear or flow to the right when the box is clicked:

Code like this:

  <section class="container">
        <label for="search_bar">Search </label>   
        <input class="search_bar" 
               name="search_bar" 
               type="search" 
               placeholder="Search">
               <a href="#">
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="375.045 607.885 30.959 30.33" enable-background="new 375.045 607.885 30.959 30.33" xml:space="preserve">
					<path fill="#494949" d="M405.047,633.805l-7.007-6.542c-0.129-0.121-0.267-0.226-0.408-0.319c1.277-1.939,2.025-4.258,2.025-6.753 c0-6.796-5.51-12.306-12.307-12.306s-12.306,5.51-12.306,12.306s5.509,12.306,12.306,12.306c2.565,0,4.945-0.786,6.916-2.128 c0.122,0.172,0.257,0.337,0.418,0.488l7.006,6.542c1.122,1.048,2.783,1.093,3.709,0.101 C406.327,636.507,406.169,634.853,405.047,633.805z M387.351,629.051c-4.893,0-8.86-3.967-8.86-8.86s3.967-8.86,8.86-8.86 s8.86,3.967,8.86,8.86S392.244,629.051,387.351,629.051z"/>
				</svg>
            </a>    
      </section>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

*, *:before, *:after{
  box-sizing: border-box;
  font: 300 1em/1.5 'Open Sans', 'Helvetica Neue', Arial, sans-serif; color: #666;
  padding: 0; margin: 0;
}

html, body{background: rgb(236, 240, 241);}

section.container{
  width: 40%;
  min-width: 300px;
  margin: 20% auto;
}
  label{display: none;}
  input.search_bar{
    border: none; 
    outline: none;
    width: 75px;
    border-radius: 55px;
    margin: 0 auto;
    font-size: 2em; color: #0d2840;
    padding: 25px 70px 25px 35px;
    transition: all .3s cubic-bezier(0,0,.5,1.5);
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
    background: rgb(255, 255, 255) url(https://i.imgur.com/seveWIw.png) no-repeat center center;
  }
  input.search_bar:focus{width: 100%; background-position: calc(100% - 35px) center}

  /*Removes default x in search fields (webkit only i guess)*/
  input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
  /*Changes the color of the placeholder*/
  ::-webkit-input-placeholder{color: #0d2840; opacity: .5;}
  :-moz-placeholder{color: #0d2840; opacity: .5;}
  ::-moz-placeholder{color: #0d2840; opacity: .5;}
  :-ms-input-placeholder{color: #0d2840; opacity: .5;}

  svg#Layer_1 {
    display: block;
position: absolute;
margin-left: 44px;
margin-bottom: 300px;
margin-top: -55px;
  }```

O.w · April 6, 2021, 6:49am

I want it to disappear or flow to the right. As you can see below it is now taking up space to the left of the image.

jsdisco · April 6, 2021, 8:58am

Instead of using margins to position the icon (always a bad idea), you can use the top and left (or bottom and right) properties. You’d also have to set your container to position:relative.
Not sure if that works because I can’t test it, it’s just what comes to mind.

One suggestion - you’d get far more help if you provided a link to a working example on something like codepen.io. Right now you’re literally expecting people to create index.html/style.css files into their own editors and copy/paste all your code in there, so they can actually see what’s happening. That’s kind of a lot to ask on a forum where you get assistance for free from people who sacrifice their free time to help you.

Often, these CSS problems are very easy to fix if you can actually see the website, and if a working example was only one click away, someone had surely already helped you solve this. Your choice of course, but maybe something to keep in mind when asking a question here.

DanCouper · April 6, 2021, 2:02pm

Just delete the SVG, you’re already using a small icon of a magnifying glass as the background, so you have two icons there.

O.w · April 7, 2021, 5:59am

Hmm I don’t understand what you mean. Do I have two? I did not know.

I should delete the svg and use another?

O.w · April 7, 2021, 6:06am

Why is margin often a bad way of doing it? Yeah I tried left, right and so on but it did not move then.

I am going to check out codepen. Here mine is:
https://codepen.io/-Noob-/pen/oNBGgLZ

As Dan Couper wrote I have two icons when I upload it two codepen. But I am not sure why that happens in codepen but not in my computer? In my computer it looks like I have only one.

Off topic: Is Codepen kind of like Github where one uploads code for others to see? For example like a resume?

jsdisco · April 7, 2021, 10:14am

Awesome, thanks. Much easier now.

So as Dan said correctly, you only have to remove the SVG from your HTML, because you’ve already given your searchbar a background-image in your CSS:

background: rgb(255, 255, 255) url(https://i.imgur.com/seveWIw.png) no-repeat
    center center;

By the way, codepen works a little differently than when you work locally on your computer. It provides the <!DOCTYPE> declaration and the <head> for you behind the scenes. The only thing that goes into the HTML panel is the content of your <body>. You don’t have to link a stylesheet, whatever you put into the CSS panel will be automatically added as styles to your page. You also don’t need script tags in the HTML panel, all your JavaScript goes into the JS panel. But for this, you don’t even need JavaScript, you’re doing it all with CSS (and it’s working fine).

So I’ve

deleted all unnecessary things from the HTML
left the CSS as it was
deleted all the JS

And this is the result:

When you click inside the searchbar:

I think it does exactly what it should?

For your other questions:

Maybe I over-generalised a bit. Positioning with margins in combination with percentage values or auto is mostly fine, but you used fixed px values (and quite large ones). Imagine you use margin-left:400px, and then look at that page on a smartphone with 360px width. It’s going to rip your layout apart.

Github is for larger projects. Its primary purpose is version control, and allowing several people to work on the same project simultaneously. You wouldn’t use codepen for sharing your resume, that belongs on github, or rather into a downloadable pdf from your webpage.

Codepen is more like a sandbox, perfectly suited for small experiments like your searchbar. Or if you want to test different button hover effects. Or for fCC projects like a small tribute page. Because all the HTML boilerplate is already provided for you, it saves you the effort of having to create those files on your computer, link the stylesheet, etc.

And of course, it makes it very easy to share your code with others. No need to copy/paste the code into the forum, everyone can just check out your codepen and can play around with it.

DanCouper · April 7, 2021, 10:35am

If there are not two icons showing, then the code you posted here is still not the code that is in front of you. Look:

<section class="container">
  <label for="search_bar">Search</label>   
  <input class="search_bar" name="search_bar" type="search" placeholder="Search">
  <a href="#">
    <!-- HERE IS AN ICON: -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="375.045 607.885 30.959 30.33" enable-background="new 375.045 607.885 30.959 30.33" xml:space="preserve">
      <path fill="#494949" d="M405.047,633.805l-7.007-6.542c-0.129-0.121-0.267-0.226-0.408-0.319c1.277-1.939,2.025-4.258,2.025-6.753 c0-6.796-5.51-12.306-12.307-12.306s-12.306,5.51-12.306,12.306s5.509,12.306,12.306,12.306c2.565,0,4.945-0.786,6.916-2.128 c0.122,0.172,0.257,0.337,0.418,0.488l7.006,6.542c1.122,1.048,2.783,1.093,3.709,0.101 C406.327,636.507,406.169,634.853,405.047,633.805z M387.351,629.051c-4.893,0-8.86-3.967-8.86-8.86s3.967-8.86,8.86-8.86 s8.86,3.967,8.86,8.86S392.244,629.051,387.351,629.051z"/>
    </svg>
    <!-- -->
  </a>    
</section>

input.search_bar{
    border: none; 
    outline: none;
    width: 75px;
    border-radius: 55px;
    margin: 0 auto;
    font-size: 2em; color: #0d2840;
    padding: 25px 70px 25px 35px;
    transition: all .3s cubic-bezier(0,0,.5,1.5);
    box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
    /* ------> HERE IS AN ICON */ background: rgb(255, 255, 255) url(https://i.imgur.com/seveWIw.png) no-repeat center center;
}

https://codepen.io/sutor/pen/poRWbRV

2 icons:

Screenshot 2021-04-07 at 11.34.36

Again, it is much easier if you can post a codepen so other people can actually see what you’re doing and can provide help.

O.w · April 8, 2021, 6:47am

Ok guys

Now I can see it in there for some reason. Also, on my own computer. I am a bit confused by this. Why can I see it on my computer now all of a sudden? Whilst before I could only see it on codepen?

Really strange stuff.

jsdisco · April 8, 2021, 11:38am

Maybe you didn’t refresh the preview when working locally after inserting the image, or (if you have a live server/hot reload) something went wonky there.

system · October 7, 2021, 11:39pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Search box problem HTML-CSS	9	2664	July 27, 2022
Adding an svg inplace of the search input text HTML-CSS	4	3889	March 9, 2021
Search bar icon disappears in website HTML-CSS	19	1830	June 18, 2022
How to put a image inside of a input box?	5	13490	January 16, 2021
How do i make a search bar that searches through the images	4	1526	September 18, 2021

Making sign travel inside of search bar

Related topics