#1 Fri 31 January 2025 21:52
- liege67
- Participant assidu
- Lieu: Liège
- Date d'inscription: 10 Apr 2014
- Messages: 193
Taille formulaire de sélection sur smartphone
bonjour
avec un CSS adapté pour les smartphones (avec écran haute résolution), je n'ai aucune maitrise sur la taille d'affichage d'une liste de valeurs à sélectionner. Est-ce possible de gérer cet affichage ou est-ce un affichage par défaut ?
voir mes illus
merci
jean marc
le CSS y compris la variante /* Requêtes de média pour les écrans de smartphone */
#selector-container {
position: absolute;
top: 13px; /* Ajuste la distance par rapport au haut de la fenêtre */
left: 50px; /* Ajuste la distance par rapport au bord gauche de la fenêtre */
z-index: 1005; /* Assure que le sélecteur reste au-dessus de la carte */
background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
padding: 10px; /* Padding interne */
border-radius: 5px; /* Coins arrondis */
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Ombre portée */
font-family: Arial, sans-serif; /* Famille de police par défaut */
font-size: 11px; /* Taille de police par défaut */
color: #000; /* Couleur de texte par défaut */
}
#selector-container label {
margin-right: 5px; /* Espace entre le label et le sélecteur */
color: #000; /* Couleur de texte du label */
font-weight: bold; /* Poids de police du label */
}
#selector-container select {
padding: 5px; /* Padding interne du sélecteur */
font-size: 10px; /* Taille de police du sélecteur */
color: #000; /* Couleur de texte du sélecteur */
background-color: #fff; /* Couleur de fond du sélecteur */
border: 1px solid #ccc; /* Bordure du sélecteur */
border-radius: 3px; /* Coins arrondis du sélecteur */
outline: none; /* Supprime l'effet de contour */
width: 200px; /* Largeur du sélecteur */
}
/* Requêtes de média pour les écrans de smartphone */
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
#selector-container {
top: 13px; /* Ajuste la position en fonction de la taille de l'écran */
left: 50px; /* Ajuste la position en fonction de la taille de l'écran */
width: 150px; /* Ajuste la largeur du conteneur */
padding: 5px; /* Réduit le padding */
font-size: 10px; /* Réduit la taille de la police */
}
#selector-container select {
font-size: 8px; /* Réduit la taille de la police du sélecteur */
width: 100%; /* Ajuste la largeur du sélecteur */
}
}
Dernière modification par liege67 (Fri 31 January 2025 21:52)
Hors ligne