Sujet Précédent Sujet Suivant

Menu deroulant

Fermé
TatsuSheva Messages postés 21 Date d'inscription dimanche 9 août 2015 Statut Membre Dernière intervention 4 juillet 2016 - 12 août 2015 à 14:54
TatsuSheva Messages postés 21 Date d'inscription dimanche 9 août 2015 Statut Membre Dernière intervention 4 juillet 2016 - 12 août 2015 à 15:36
Bonjour,
Je suis etudiant en informatique et j'ai un projet à faire.
J'ai commencé le formulaire de connexion.
Voici les resultats:


et voici mes codes:
PHP: 


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>

<link rel="stylesheet" href="style.css" />

</head>

<body>

<nav><a href="#" class="focus">Log In</a> | <a href="register.html">Register</a></nav>

<form>

	<h2>Log In</h2>

	<input name="text" type="text" class="text-field" placeholder="Username" />
	<input type="password" class="text-field" placeholder="Password" />
	<select name="type" id="type">
            <option>Faites votre choix</option>
            <option value="administrateur">administrateur</option>
            <option value="Etudiant">Etudiant</option>
            <option value="Enseignant">Enseignant</option>
          </select>
    <input type="button" value="Log In" class="button" />

</form>

</body>
</html>



CSS: 



body {
	background: url(pictures/background.png) fixed 50% no-repeat white;
	font-family: Helvetica;
}

h2 {
	color: #a6a6a6;
}

/* NAVIGATION */

nav {
	position: fixed;
	top: 10px;
	left: 10px;
}

nav a {
	color: #4889C2;
	font-weight: bold;
	text-decoration: none;
	opacity: .3;
	-moz-transition: all .4s;
}

nav a:hover {
	opacity: 1;
}

nav a.focus {
	opacity: 1;
}

/* LOGIN & REGISTER FORM */

form {
	width: 280px;
	height: 260px;
	margin: 200px auto;
	background: white;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0,0,0, .4); 
	text-align: center;
	padding-top: 1px;
}

form.register{																				/* Register form height */
	height: 420px;
}

form .text-field {																			/* Input fields; Username, Password etc. */
	border: 1px solid #a6a6a6;
	width: 230px;
	height: 40px;
	border-radius: 3px;
	margin-top: 10px;
	padding-left: 10px;
	color: #6c6c6c;
	background: #fcfcfc;
	outline: none;
}

form .text-field:focus {
	box-shadow: inset 0 0 2px rgba(0,0,0, .3);
	color: #a6a6a6;
	background: white;
}

form .button {																				/* Submit button */
	border-radius: 3px;
	border: 1px solid #336895;
	box-shadow: inset 0 1px 0 #8dc2f0;
	width: 242px;
	height: 40px;
	margin-top: 20px;
	
	background: linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	background: -o-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	background: -moz-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	background: -webkit-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	background: -ms-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
	
	cursor: pointer;
	color: white;
	font-weight: bold;
	text-shadow: 0 -1px 0 #336895;
	
	font-size: 13px;
}

form .button:hover {
	background: linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	background: -o-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	background: -moz-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	background: -webkit-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
	background: -ms-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
}

form .button:active {
	background: linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	background: -o-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	background: -moz-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	background: -webkit-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	background: -ms-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
	
	box-shadow: inset 0 0 2px rgba(0,0,0, .3), 0 1px 0 white;
}


Ma questions est : comment faire pour que le menu deroulant ait la meme forme/couleur etc que celle des autres champs(Username , Password) ?

Merci.
A voir également:

2 réponses

Réponse 1 / 2
Utilisateur anonyme
12 août 2015 à 15:03
Alors le soucis c'est qu'un menu déroulant est difficilement personnalisable:

Voilà une petite aide:

https://bavotasan.com/2011/style-select-box-using-only-css/

Mais c'est juste pour la boite visible, les choix eux, ne sont pas personnalisable, à part peut-être le fond et la couleur du texte, mais impossible de modifier la taille des éléments, ou mettre des effet comme le box shadow.

Le mieux est de faire une liste ul+li et dans chaque li mettre un input type radio avec label. Car un li tu y fais ce que tu veux.
1
Réponse 2 / 2
TatsuSheva Messages postés 21 Date d'inscription dimanche 9 août 2015 Statut Membre Dernière intervention 4 juillet 2016
12 août 2015 à 15:36
Merci a toi ! J'ai "emprunté" les codes du lien que tu m'as passé et ça passe.
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses