J'ai un formulaire qui comprend tu css3 cependant sous firefox cela fontionne bien les ombres sont bien présente les dégradés également ainsi que l'apparition d'un message lors d'une action sur un bouton.
Mais sous IE8 plus d'ombre plus de dégradé et plus de message qui apparait voici mon code CSS
Je doit surement rajouter des lignes pour que cela soit compatible IE8 voici une partie de mon CSS
Code : Tout sélectionner
/*CHAMPS FORMULAIRE */
a{
color:#333;
text-decoration:underline;
}
/*fond champs avec centrage et couleur*/
form{
background:#f7f7f7;
background:#a6eafd;
border:1px solid #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 15px #aaa;
-webkit-box-shadow:0 0 15px #aaa;
margin:300px ;
padding:20px;
width:500px;
}
/*Ecriture cadre et liserer*/
h1{
border-bottom:1px solid #ec702f;
font-size:15px;
font-family:Arial;
font-weight:bold;
letter-spacing:2px;
margin-bottom:20px;
text-transform:uppercase;
color:#6c716b;
}
/*marge hauteur enter les champs*/
form p{
margin-bottom:20px;
}
p
{
font-size:15px;
font-family: arial;
color:#6c716b;
}
form p:last-child{ /* Sélecteur avancé pour sélectionner le dernier paragraphe du formulaire */
margin-bottom:0;
}
/*Pointeur et margeur entre le texte et les champs */
label{
cursor:pointer;
display:block;
float:left;
font-size:13px;
font-weight:bold;
line-height:28px;
margin-bottom:5px;
width:120px;
}
/*couleur label*/
form p:hover label{
color:#ec702f;
}
form p:hover label:after{
content:" »";
}
/*arrondi champs et ombrage champs */
input[type=text],
input[type=password]{
background: rgba(255, 255, 255, 0.9);
background:-moz-linear-gradient(90deg, #fff, #eee); /* Firefox */
background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #eee)); /* Webkit */
border:1px solid #aaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-moz-box-shadow:0 0 3px #aaa;
-webkit-box-shadow:0 0 3px #aaa;
padding:5px;
}
input[type=text]:focus,
input[type=password]:focus{
border-color:#093c75;
-moz-box-shadow:0 0 3px #0459b7;
-webkit-box-shadow:0 0 3px #0459b7;
outline:none; /* Pour enlever le contour jaune lorsque l'on sélectionne un input dans Chrome */
}
select{
cursor:pointer;
padding:3px;
-moz-box-shadow:0 0 3px #aaa;
-webkit-box-shadow:0 0 3px #aaa;
}
select:active,
select:focus{
border:1px solid #093c75;
-moz-box-shadow:0 0 3px #0459b7;
-webkit-box-shadow:0 0 3px #0459b7;
outline:none;
}
/*Bouton Validation */
a.submit{
background:#ddd;
background:-moz-linear-gradient(90deg, #ec702f, #f29459); /* Firefox */
border:1px solid #093c75;
-moz-border-radius:3px;
-moz-box-shadow:0 1px 0 #fff;
color:#fff;
cursor:pointer;
font-family:Arial,sans-serif;
font-size:12px;
font-weight:bold;
margin-left:120px;
padding:5px 10px;
text-decoration:none;
text-shadow:0 1px 1px #333;
text-transform:uppercase;
}
input[type=submit]:hover,
}
input[type=submit]:active,
input[type=submit]:focus,
a.submit:active,
a.submit:focus{
background:#ccc;
background:-moz-linear-gradient(90deg, #0bcdff, #067cd3);
background:-webkit-gradient(linear, left top, left bottom, from(#067cd3), to(#0bcdff));
border-color:#093c75;
outline:none;
}
#finish{
background:rgba(65, 166, 42, 0.2);
border:2px solid #41a62a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
display:none;
padding:5px 10px;
}
#finish:target{
display:block;
}
