CODEWITHSUNDEEP
htmlcss
Matt Weick
Matt Weick

Reputation: 332

Display search button (image) next to search box

trying to get the search button (image) to display either next to or inside the search box. Everything I try, the search button(image) always ends up below the search box and centered for some reason.

<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">
        <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value="">
            <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>
                <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10">
            </span> 
            <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
                <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20">
            </span>
        <input id="searchGoButton" style="width: 27px;" type="image" src="/images/searchbutton27px.png" alt="Search">
</form>

https://jsfiddle.net/pf6qQ - for some reason it shows up to the right on fiddle but on my Joomla site it's always centered and below the search box. Ultimately I'm looking to get it in the search box

Upvotes: 0

Views: 2316

Answers (1)

p1xelarchitect
p1xelarchitect

Reputation: 289

Try to define your css separately and not inline in your HTML. Despite this, I've taken your code and added a position style to the search image. This should work.

Try this:

    <form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">

        <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value=""></input>

         <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>

         <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10"></input>
         </span> 

        <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
        <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20"></input>
        </span>

        <input id="searchGoButton" style="width: 27px; position:relative; left:-40px; top:10px;" type="image" src="/images/searchbutton27px.png" alt="Search"></input>
    </form>

Upvotes: 1

Related Questions