PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

CSS Button en Submit

Door - SanThe - op 15-09-2008 14:33
2.687 views
Hallo Phphulpers,

Ik heb een <input type="button" (of submit) />. Kleurtje geven gaat prima. Ook hover gaat prima, maar niet in Internet Explorer. Weet iemand hoe het ook in IE werkend te krijgen is?

SanThe.
-
- -
15-09-2008 13:03
Misschien kun je iets met <button />:


<button type="submit">Verzenden</button>


Het gebruik van 'button' i.p.v. 'input' heeft ook nog als voordeel dat je er heel gemakkelijk plaatjes in kunt zetten. Misschien kun je het ook beter stylen met CSS.
- SanThe -
15-09-2008 15:07 

input.on
{
	margin				: 5px;
	background-color	: red;
	color				: yellow;
}

input.on:hover
{
	background-color	: yellow;
	color				: red;
}

Niks nijzonders. Werkt prima in FF.
Wat er verteld wordt bij die link werkt bij mij ook niet. Wel weer in FF.
- SanThe -
19-09-2008 10:45
Helaas, ik heb dit nog niet kunnen oplossen.
Iemand nog ideëen?
T
Tamara
19-09-2008 11:07
geef de button een class of id:


#buttonSubmit{
background:#000;
}
#buttonSubmit:HOVER{
background:#FFF;
}


deze doet het zeker weten in ie en ff
- SanThe -
19-09-2008 12:14
Dank je Tamara, maar helaas werkt dat ook niet in IE.
M
Mitchell
19-09-2008 12:20
:hover werkt in IE alleen op een hyperlink.

Ik denk dat je javascript zal moeten gebruiken als je perse een hover wilt hebben.
R
Robert Deiman
19-09-2008 12:46
SanThe schreef op 15.09.2008 14:33
Hallo Phphulpers,

Ik heb een <input type="button" (of submit) />. Kleurtje geven gaat prima. Ook hover gaat prima, maar niet in Internet Explorer. Weet iemand hoe het ook in IE werkend te krijgen is?

SanThe.


Heb je het over IE6 in dit geval, bij mij werkt het wel eenvoudig in IE7, en voor IE6 moet je de csshover.htc toepassen, zoals in de css die hierin staat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Robert Deiman" />

	<title>Button hover</title>
	<style type="text/css">
	body{
		behavior:url(csshover.htc)
	}
		input.submit{
			color:#ffccff;
			font-style:italic;
			font-weight:bold;
			background-color:#CCFFFC;
			border: 1px outset #00FFCC;
			}
		input.submit:hover{
			color:#ffccff;
			font-style:italic;
			font-weight:bold;
			background-color:#CCFFCC;
			border: 1px inset #00FFCC;
			}
	</style>
</head>

<body>
<form action="#" method="post">
<input type="submit" value="verzenden" class="submit" />


</form>


</body>
</html>


edit

Let wel op, ik heb dit ooit proberen te gebruiken in combinatie met de pngfix, dat ging niet helemaal goed.
N
Niek Weevers
19-09-2008 13:19
Ik gebruik altijd jQuery.
Zet in je css ook een class erbij, zoals het volgende

button:hover,
button.hover
{
    background-color    : yellow;
    color                : red;
}

Met jQuery regel je dan dat er een class moet worden toegevoegd wanneer je over het element gaat 

$("button").hover(
  function()
  {
    $(this).addClass("hover");
  },
  function()
  {
    $(this).removeClass("hover");
  }
);

Reageren

Inloggen om te reageren