CSS-style för knapp

6 svar · 590 visningar · startad av lillebror 16 aug. 2006

lillebrorMedlem sedan apr. 20041 597 inlägg

Frågan16 aug. 2006 16:14#1

Hej,

Jag tycker min nuvarande CSS-kod gör att mina formulärknappar blir väldigt stela och tråkiga. Bifogar en bild på hur det ser ut nu. Finns det någon som har en formulärknappsdesign med CSS-kod som gör knapparna lite mer levande?! :)

J.N.Medlem sedan apr. 20031 660 inlägg

17 aug. 2006 07:46#2

HEJ!

Det är bara att styla på på lämpligt sätt!

<html>
<head>
<style>
.submit{
	padding:0 5px;
	border:solid 1px #000;
	background-color:#faa;
	color:#fff;
}
</style>
</head>

<body>

<input type="submit" id="submit" value="Anmäl &raquo;&raquo;" class="submit" />

</body>
</html>

Det finns på någon webbplats som jag inte kommer ihåg nu en "fullständig" genomgång om hur olika formulärelement ser ut i olika webbläsare. Kontentan är i alla fall att du inte kan räkna med att det ser likadant ut överallt.

kaxigtMedlem sedan okt. 2004636 inlägg

17 aug. 2006 07:50#3

Så här har jag löst det:

<input type="[red]image[/red]" class="goclear" name="Submit" 
[red]src="http://dindomän.com/images/go.gif"[/red] alt="go" title="go" value="kommentera" />

Då kan du skapa en egen bild i ex photoshop och lägga in absolut url till bilden i koden. Snyggt blir det också :)

lillebrorMedlem sedan apr. 20041 597 inlägg

17 aug. 2006 09:46#4

Tack för tipsen. Ska testa och se vad jag kan åstadkomma :) I'll be back!

zcorpanMedlem sedan dec. 20042 245 inlägg

17 aug. 2006 11:54#5

Det går att lägga en vanlig bakgrundsbild på en <input type="submit">.

ir0nMedlem sedan mars 200714 inlägg

29 juli 2007 09:51#6

tjenare zcorpan! vet att det var ett tag sedan du skrev detta, men hur lägger man en bild på en inputknapp. Jag har problemet att jag vill ha 2 olika knappar som båda laddar om sidan och först så kollas vilken av knapparna som var nertryckta. Det ska alltså både vara en bild och ett id på knappen.
Tack på förhand!

//Andreas

zcorpanMedlem sedan dec. 20042 245 inlägg

29 juli 2007 17:25#7

#knapp1 { background:url(...); }
#knapp2 { background:url(...); }

Det är dock lite klurigt att "få bort" texten i knappen, om texten redan finns med i bilden.