how I can get search icon little bit to center or down in search box?

  • Resolved johannes999

    (@johannes999)


    1 year, 7 months ago

    Hello,

    I have embedded google search icon into search box in my header.php page the code is :

    <div class="search-box">			
    <form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
        <div>           
            <label class="screen-reader-text" for="s">Search for:</label>
            <input value="" name="s" id="s" type="text" placeholder="Zoeken" "<?php the_search_query(); ?>">			
            <input id="searchsubmit"  value="search" class="material-symbols-outlined"         type="submit">
        </div>
    </form>
</div>

    and this is css code: 

    	.search-box {
	width:33.333%;
	 display: flex;
     justify-content:flex-end;	  
     align-items: center;
     margin-right:4%;
	 margin-top:-0.2rem;
	}
	
	
input#searchsubmit.material-symbols-outlined {
	 
	   
		color:red;
      
	}
	
	


input[type="text"] {
  width: 275px;
  height:45px; 
  border-radius: 20px;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  outline: none;
 

}

#searchsubmit {

margin-left:-72px; 
background:none;  
border:none;
 
}

#searchsubmit:hover {

  cursor: pointer;
  
}

    the problem is I can not get the google search icon with using padding and margin little bit to center or to down in search box.

    I have tried evrything whitout results?

    How I can get this search icon liitle bit to down or to center in searchbox?

    when you go to my url homepage you can see what I mean. the other pages of the website are not completed yet.

    thanks

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Usually, you’d use vertical-align: middle to vertically position an inline, inline-block or table-cell element to the middle.

    But you have some paddings on the icon (the submit input box), so you need to take that into consideration as well.

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    I have maded the code in:

    input#searchsubmit.material-symbols-outlined {
	 
	   vertical-align:middle;
		color:black;
      margin-top:-0.6rem;
	}

    and the problem is solved.

    I couldn’t think about vertical-align.

    padding didn’t work because maybe I have symbols-outlined property.

    so I used margin. if I am wrong in this case correct me.

    thank you very much

    It seems that you are having trouble centering or moving the Google search icon within your search box. Have you tried using the CSS “position” property and setting it to “relative” or “absolute”? You can then use “top”, “bottom”, “left”, or “right” properties to move the icon around within the search box.

    For example, you can try adding the following CSS code to your existing CSS code:

    .material-symbols-outlined { position: relative; top: 5px; /* or adjust as needed / margin-left: 10px; / or adjust as needed */ }

    This should move the icon down a little and give it some space on the left side of the input field. You can adjust the values to get the desired result.

    Thread Starter johannes999

    (@johannes999)

    thanks,

    it works

    Great to hear that the solution I suggested resolved your issue with centering or moving the Google search icon within your search box!

    As I mentioned before, using the CSS “position” property and setting it to “relative” or “absolute” can be an effective way to move the icon around within the search box. You can adjust the “top”, “bottom”, “left”, or “right” properties to get the desired result.

    In the example code I provided, the “top” property was set to 5px to move the icon down a little, and the “margin-left,” property was adjusted to provide some space on the left side of the input field. Feel free to play around with the values until you achieve your desired result.

    Acutually once I also face this issue on my website. So that’s why I have suggested you.

    If you have any further questions or concerns, please don’t hesitate to reach out. I’m always here to help.

    Thread Starter johannes999

    (@johannes999)

    thanks again

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘how I can get search icon little bit to center or down in search box?’ is closed to new replies.

Tags