Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>you can replicate it with css here is an example of how I would do it</p> <p><a href="http://jsfiddle.net/LqVNM/6/" rel="nofollow">http://jsfiddle.net/LqVNM/6/</a></p> <p>HTML:</p> <pre><code>&lt;div id="search_combo"&gt; &lt;div id="icon-left"&gt;&lt;img id="s-img" src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/search.png" width="16px" height="16px"/&gt;&amp;#x25BC; &lt;/div&gt; &lt;input type="text" name="search" id="search"/&gt; &lt;div id="icon-right"&gt;&lt;img id="s-img" src="http://cdn3.iconfinder.com/data/icons/glyph/227/Cancel-128.png" width="16px" height="16px"/&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#search{ border: 0 none; border-top: 1px solid #666666; border-bottom: 1px solid #666666; height: 25px; } #search:focus { outline-width: 0; } #icon-left{ font-size: 10px; color: #666666; display: inline; position: relative; right: -2px; padding: 8px 0px 6px 6px; border: 1px solid #666666; border-right: 0 none; border-top-left-radius: 15px; border-bottom-left-radius: 15px; cursor: pointer; } #icon-right{ display: inline; position: relative; left: -6px; padding: 4px 6px 5px 0; border: 1px solid #666666; border-left: 0 none; border-top-right-radius: 15px; border-bottom-right-radius: 15px; cursor: pointer; } @-moz-document url-prefix() { #icon-left{ padding-top: 10px; } #icon-right{ padding-top: 6px; } } #s-img{ position: relative; top: 3px; } </code></pre> <p>JQUERY:</p> <pre><code>$(document).ready(function(){ $("#icon-left").click(function(){ alert("clicked search icon"); }); $("#icon-right").click(function(){ alert("clicked cancel icon"); }); }); </code></pre> <p><a href="http://jsfiddle.net/LqVNM/6/" rel="nofollow">http://jsfiddle.net/LqVNM/6/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload