Hur gör jag denna sökknapp?

4 svar · 1 228 visningar · startad av eriks 25 mars 2009

eriksMedlem sedan apr. 20011 418 inlägg

Frågan25 mars 2009 23:27#1

Hej,

Jag vill göra en sökknapp såsom min bifogade bild (precis under inlägget) visar. Jag kan rita den, men nu är frågan hur jag gör för att lägga in den som ett formulär på min sida så att den fungerar för sök?

Jag vill såklart ha en så enkelt lösning som möjligt, går detta att göra endast i css? Hur ska jag tänka? (Ska bilderna vara bakgrundsbilder? Hur lägger jag upp det?) Jag har ingen riktigt uppfattning om hur detta ska gå till. Tidigare har jag i stort sett endast jobbat med de grundformulär som finns i html.

Tack på förhand!

Mvh Erik

xtremeMedlem sedan juli 20002 056 inlägg

25 mars 2009 23:58#2

Bara en tanke men kan du inte använda ett vanligt formulär och lägga bilden i en div som ett lager över textrutan? Bilden gör du sedan klickbar som sök.

eriksMedlem sedan apr. 20011 418 inlägg

26 mars 2009 14:13#3

Nä det funkar inte... Om jag har bilden överst ser jag inte vad som står i sökrutan (bilden är inte transparant) och om jag har bilden unders syns sökrutan som en vit retangel...

PeddaMedlem sedan juni 20006 031 inlägg

26 mars 2009 14:33#4

http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css/

rhdfMedlem sedan okt. 2007446 inlägg

26 mars 2009 14:36#5

du får helt enkelt ta bort alla bakgrunder och borders från inputfälten först
här har jag bara satt en bakgrundsfärg på dem så att de skall synas
det borde funka att ha bakgrundsbilden på själva "inputsen"
eventuellt så får du ha en bild som ligger i diven och en på knappen

notera att jag använd input[type=submit]-selectors man bör kanske ha en klass eller liknande för att även äldre browsers skall fatta

#searchbox{/*lite positionering och annat kul*/}

#searchbox label{display:none;}

#searchbox input[type=text]{
background:none;
border:none;
margin:0;
padding:0;
background-color:#FFFF66;}

#searchbox input[type=submit]{
background:none;
border:none;
margin:0;
padding:0;
background-color:#0066CC;
text-indent:-9999px;
width:30px;
}

<form>
<div id="searchbox">
<label for="search">Sök efter</label>
<input type="text" name="search" id="search" class="txtBox" value="search.." /><input type="submit" class="btnSubmit" value="Sök" />
</div>
</form>