Making sign travel inside of search bar

[O.w]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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:

@O.w

Why is margin often a bad way of doing it?

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.

@O.w

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

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]

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:

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]

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]

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.