WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. chappie
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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
    Member
    Posted 10 months ago #

    remove that #navbar from the code above :D

  5. chappie
    Member
    Posted 10 months 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
    Member
    Posted 10 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic