Partage
  • Partager sur Facebook
  • Partager sur Twitter

Sélection d'un champ de saisie

Sujet résolu
    26 avril 2019 à 8:13:46

    Bonjour ! Je sollicite votre aide pour un soucis d'esthétique sur mon (futur) site...

    Ce qu'il se passe, c'est que j'aimerais que lorsqu'on clique sur un espace blanc (identifiant ou mot de passe), le navigateur sélectionne l'intégralité de cet espace blanc, et non le champ pour la saisie. Voici ce que j'obtient :

    Je pensais donc agrandir le champ en épaisseur et en taille, mais je ne sais pas si la bonne astuce.

    Voici mon code HTML : 

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Sandwicherie de Sainte Claire</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet">
    	<html lang="fr">
    </head>
    <body>
    	<div id="liseretHaut"></div>
    	<div id="liseretDegrade"></div>
    	<div id="blocConnexion">
    		<div id="blocTitre">
    			<h1>Bienvenue à la sandwicherie de</h1>
    			<h2>SAINTE CLAIRE !</h2>
    		</div>
    		<div class="saisie">
    			<p class="infoSaisie">VOTRE IDENTIFIANT :</p>
    			<p>
    				<form method="post" action="traitement.php">
    					<input type="pseudo" name="identifiant" class="champSaisie" placeholder="prénom.nom" size="50">
    				</form>
    			</p>
    		</div>
    		<div class="saisie">
    			<p class="infoSaisie">VOTRE MOT DE PASSE :</p>
    			<p>
    				<form method="post" action="traitement.php">
    					<input type="password" name="password" class="champSaisie" placeholder="********">
    				</form>
    			</p>
    		</div>
    		<input type="submit" value="CONNEXION" id="button" />
    	</div>
    </body>
    </html>

    Et voici le code CSS :

    body
    {
    	margin:0;
    	background-color: rgb(235,235,235);
    }
    
    #blocConnexion h1,h2,p,input
    {
    	font-family: Lato, Tahoma, serif;
    }
    
    #button
    {
    	color: rgb(21,114,232);
    	background-color: white;
    	border-color: white;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	border-radius: 8px;
    	font-weight: bold;
    	transition: all 0.2s ease-in;
    
    }
    
    #liseretHaut
    {
    	background-color: rgb(21,114,232);
    	padding-top: 60px;
    	padding-left: 50px;
    	box-shadow: 0px 2px 6px black;
    }
    
    #blocConnexion
    {
    	background-color: rgb(21,114,232);
    	padding-top: 20px;
    	padding-bottom: 20px;
    	padding-left: 50px;
    	padding-right: 50px;
    	margin-top: 50px;
    	margin-right: 500px;
    	margin-left: 500px;
    	display: flex;
    	flex-direction: column;
    	border-radius: 10px;
    }
    
    #blocConnexion h1,h2
    {
    	color: white;
    	text-align: center;
    }
    
    .saisie
    {
    	background-color: white;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	border-radius: 5px;
    }
    
    input
    {
    	border:none;
    }
    
    .infoSaisie
    {
    	text-align: center;
    	font-size: 15px;
    }
    
    .champSaisie
    {
    	padding-left: 20px;
    	font-size: 15px;
    }
    
    #button:hover
    {
    	background-color: rgb(21,114,232);
    	color: white;
    	border: solid 2px white;
    }
    
    h1
    {
    	font-family: Lato, Arial, serif;
    	color:black;
    	margin-left: 15px;
    }

    Merci de votre aide :)


    • Partager sur Facebook
    • Partager sur Twitter
      26 avril 2019 à 10:19:48

      Bonjour,

      Je ne comprend pas très bien ce que tu souhaites obtenir...

      Au pif donc, ajoute ceci en css sur tes <input> :

      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;

      Tu n'aura ainsi plus de bordure bleu lorsque ton <input> sera en focus.

      • Partager sur Facebook
      • Partager sur Twitter
      Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
        26 avril 2019 à 18:45:24

        Salut !

        C'est exactement ce que je voulais, et ça fonctionne ! Merci beaucoup !

        • Partager sur Facebook
        • Partager sur Twitter

        Sélection d'un champ de saisie

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown