Hogyan alakítsam ki saját png ikonnal a keresőmezőt?
Kedves Programozók! A következő linkben szereplő kereső mezőt szeretném kialakítani, de saját png képpel (search. Png) és még azt szeretném, ha a menüsorban lévő nagyító - amikor rákattintok és megjelenik a keresőmező - egy áthúzott nagyítóra változna, ezt szintén saját png képpel oldanám meg. Sajnos nekem egy idő után az sem működött, hogy kattintásra jelenik meg a mező. A link, amit szeretnék kialakítani alább láthatjátok. Sajnos csak pár hete foglalkozom hobbi szinten a programozás világával, és sok helyen hibázom még. Kérem valaki segítsen a html5 és css3 megoldásban, sajnos nem találtam semmi irodalmat.
[link] Themeforest. Net/item/emona-multipurpose-business-html5-template/full_screen_preview/16048116? _ga=1.4065331.226274051.1467234551
Segítségeteket előre is köszönöm!!
válasza:Megcsinálod az input mezőt. Mellé teszel egy buttont aminek css-ben beállítod háttérként a png képet.
A kép csere megoldható jquery-ben az iconra történő kattintáskor eltünteted a képet és betöltesz helyette egy másikat.
Köszönöm a választ, egy ilyen html kódot írtam a keresőmezőre, ha így használom szerinted működhet? Ha alkalmas elküldöm a css kódot is, bár az néha furcsaságokat csinál, lehet a sorrendem rossz... Köszönöm válaszod!
<li class="search-menu">
<div class="search" id="header-search">
<div class="search-input">
<form method="get" id="searchform" role="search" action="page.html">
<div class="input-group">
<input type="text" class="form-control" value="" name="s" id="s" autocomplete="off" placeholder="Keresés..." tabindex="2" required>
<span class="input"
<button class="btn-search" type="button">
<img src="search.png" height="100" alt="Search">
</button>
</span>
</div>
</form>
</div>
</div>
</li>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!