CODEWITHSUNDEEP
htmlcssinputhref
user3105607
user3105607

Reputation: 369

Stop html input responding to href link

I have a link that is embedded in a border that acts as a button, however I only want a click to be registered in the outer part of the button, not when the user clicks inside the input (search) box. 

<a href='search'>
  <div class='button' id='search_head' style='margin-right: 1em;'>
    <input class='search' placeholder="&nbsp;e.g. blue jeans" type='text'/>
    <img src='img/mag_glass_nav.png' height='20' weight='20' />
    &nbsp; Search
  </div>
</a>

Upvotes: 0

Views: 222

Answers (2)

Kariem Muhammed
Kariem Muhammed

Reputation: 479

I didn't get it!, but i think you shouldn't do that! - DON'T WRAP INPUT ELEMENT WITHIN ANCHOR TAG!! Just wrap your input element and search link within a div with relative position to be able to position the search link. JSFiddle example

<div class="search-wrapper">
    <input class='search' placeholder="e.g. blue jeans" type='text' /> 
    <a href="search">
         <img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-24.png"/>
    </a>
</div>

Upvotes: 3

Charaf JRA
Charaf JRA

Reputation: 8334

Change simply your markup to something like this :

<input class='search' placeholder="&nbsp;e.g. blue jeans" type='text'/>
 <a href='search'>
 <div class='button' id='search_head' style='margin-right: 1em;'><img src='img/mag_glass_nav.png' height='20' weight='20'>&nbsp; Search
 </div>
</a>

Upvotes: 0

Related Questions