[resolved] Searchform submit icon instead of text (6 posts)

  1. chappie
    Posted 1 year ago #

    d4z_c0nf has very kindly coded for me here my ideal search form which behaves like the one above in the WP header - ie it stays aligned with the right edge of my slider when the viewport is narrowed.

    Now I would like to place a magnifying glass icon as the background image in the rectangular searchsubmit box to the right of the text entry field and I'd be grateful for some help.

    Happy to use the WP dashicon shown here if it makes life easier.

    Thanks for any help.

  2. d4z_c0nf
    Posted 1 year ago #

    There are tedious issue using a font based icon "into" a button, z-index&Co to preserve the click on the submit.
    Let's try this other solution, for example:

    #navbar-top #searchsubmit{
    	background: url(http://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;
    	width: 22px;
    	height: 22px;
    	background-size: 22px 22px;
    	border: none;
    	border-radius: 0px;
    	box-shadow: none;


  3. chappie
    Posted 1 year ago #

    Eureka! Thank you AGAIN d4z_c0nf - that is a thing of beauty.

    Finally, how can I replicate it on the search results page where the main-wrapper searchform still has a black rectangle?

  4. d4z_c0nf
    Posted 1 year ago #

    remove that #navbar from the code above :D

  5. chappie
    Posted 1 year ago #

    That did it. Silly me. Just a bit of CSS alignment and @media tweaks now and this is done and dusted - although I'm a bit perplexed by how the search function works so I'll start a new topic for that.

    Can't thank you enough d4z_c0nf - this has been on my To-Do list since Day 1 almost 6 months ago. I kept experimenting and failing. Asked the question here a few times but didn't find anything that worked for me until you burnt the midnight oil for me last night.

    You're a Customizr colossus.

  6. d4z_c0nf
    Posted 1 year ago #

    Eheh thank you chappie, you're too kind, as always :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic