Utilisez une expression CSS pour déterminer l'expression permettant de définir le style de saisie, qui est simple et léger. L'inconvénient est que FireFox ne prend pas en charge l'expression de jugement. Le truc fatal c'est que vous ne pouvez en distinguer qu'un (par exemple, dans l'exemple, vous ne pouvez distinguer que la zone de texte), n'essayez pas d'en définir plusieurs, les suivants écraseront ceux du haut... Ouz.. .
Code:
Exemple de code source
[www.downcodes.com] <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<tête>
<titre>www.downcodes.com</titre>
<meta name="Auteur" content="JustinYoung"/>
<meta name="Mots clés" content=""/>
<meta name="Description" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
saisir
{
background-color:expression(this.type=="text"?'#FFC':'');
}
</style>
</tête>
<corps>
<dl>
<dt>Il s'agit d'une zone de texte normale :<dd><input type="text" name="">
<dt>Il s'agit d'un bouton normal :<dd><input type="button" value="je suis un bouton">
</dl>
</corps>
</html>
Une autre façon :
Exemple de code source
[www.downcodes.com] saisir{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
1. Supprimez les attributs d'entrée et attribuez-les à className.
2. Pour l'expression, un attribut insignifiant (ici le zoom) est utilisé pour le déclencher. Après avoir traité ce qui doit être fait, cet attribut est écrasé pour résoudre le problème d'efficacité de l'exécution continue de l'expression.
Code:
Exemple de code source
[www.downcodes.com] <!--[si c'est IE 7]>
<style type="text/css" media="écran">
saisir{
zoom: expression(function(ele){(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type; ele.style.zoom = "1";}(this));
}
entrée.texte{
bordure : 1px solide ; couleur de la bordure : #CCC #EEE #EEE #CCC ;
arrière-plan : #F5F5F5 ;
}
entrée.mot de passe{
bordure : 1px solide ; couleur de la bordure : #CCC #EEE #EEE #CCC ;
couleur : #000 ; arrière-plan : #F5F5F5 ;
largeur : 50 px ;
}
entrée.bouton{
bordure : 1px solide ; couleur de la bordure : #EEE #CCC #CCC #EEE ;
couleur : #000 ; poids de la police : gras ; arrière-plan : #F5F5F5 ;
}
entrée.reset{
bordure : 1px solide ; couleur de la bordure : #EEE #CCC #CCC #EEE ;
couleur : #666 ; fond : #F5F5F5 ;
}
</style>
<![endif]-->
<style type="text/css" media="all">
entrée[type="text"]{
bordure : 1px solide ; couleur de la bordure : #CCC #EEE #EEE #CCC ;
arrière-plan : #F5F5F5 ;
}
input[type="mot de passe"]{
bordure : 1px solide ; couleur de la bordure : #CCC #EEE #EEE #CCC ;
couleur : #000 ; arrière-plan : #F5F5F5 ;
largeur : 50 px ;
}
entrée[type="bouton"]{
bordure : 1px solide ; couleur de la bordure : #EEE #CCC #CCC #EEE ;
couleur : #000 ; poids de la police : gras ; arrière-plan : #F5F5F5 ;
}
entrée[type="reset"]{
bordure : 1px solide ; couleur de la bordure : #EEE #CCC #CCC #EEE ;
couleur : #666 ; fond : #F5F5F5 ;
}
</style>
</tête>
<corps>
<input type="text" name="xx" />
<input type="password" name="yy" />
<input type="checkbox" name="oo" />
<input type="radio" name="pp" />
<input type="bouton" nom="qq" valeur="bouton" />
<input type="reset" name="oo" value="reset" />
</corps>
</html>