Augmenter la largeur des input
Bonjour,
dans mon formulaire (https://pasdpanique.fr/?action=Nous-contacter), les champs de saisie ne sont pas assez larges et quand on saisie un texte assez long, il n'est pas entièrement visible. J'ai donc essayé d'augmenter cette largeur par CSS, mais ça bouge pas. Comment faire ?
Nous-contacter.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <section class="nous-contacter">
<h2>Nous contacter</h2>
<div class="divcontact">
<p>Arnaud Brun<br />
38880 Autrans-Méaudre<br></p>
<p>Par téléphone : <a href="tel:0123456789">01 23 45 67 89</a><br>
ou par formulaire de contact :</p>
</div>
<form id="rappel" action="?action=Action-form-contact" method="post">
<fieldset>
<div>
<label for="nom">Votre nom :</label>
<input type="text" name="nom" id="nom" />
</div>
<div>
<label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom" />
</div>
<div>
<label for="email">Votre adresse email :</label>
<input type="email" name="email" id="email">
<p><em>(vérifiez bien pour qu'on puisse vous répondre)</em></p>
</div>
<div class="message">
<textarea name="message" id="message" placeholder="Votre message"></textarea>
</div>
<button class="buttonform" type="submit">Envoyer</button>
<p><em>En remplissant ce formulaire, vous consentez à ce que
Pas d’panique, en sa qualité de responsable de traitement,
collecte vos données afin de pouvoir répondre à votre message.<br>
Pour faire valoir votre droit d’accès ou d’effacement,
consultez notre <a href="./politique-de-confidentialite.php" target="_blank"
alt="Lien vers la politique de confidentialité du site Pas d'Panique" rel="noopener">politique de
confidentialité</a>.</em></p>
</fieldset>
</form>
</section> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| fieldset {
/*display: flex;
flex-direction: column;*/
justify-content: space-between;
margin: 5rem auto;
border: 1px solid grey;
border-radius: 15px;
padding: 5rem;
/* width: 80%; */
}
fieldset div {
margin: 1rem 0;
}
fieldset label {
margin-right: 0.5rem;
display: inline-block;
min-width: 20em;
}
fieldset input {
border-radius: 5px;
border: 1px solid grey;
min-width: 50em; /*j'ai beau mettre une valeur énorme, ça change rien...*/
}
.message textarea {
height: 20rem;
width: 100%;
padding: 1rem;
border: 1px solid grey;
border-radius: 15px;
}
.buttonform {
margin: 1rem auto;
width: 8em;
background-color: #fff;
padding: 1rem 2rem;
border: none;
border-radius: 15px;
cursor: pointer;
}
.buttonform:hover {
text-decoration: underline;
}
.etre-rappele p,
.nous-contacter p {
line-height: 1.2;
}
.divcontact p {
font-size: 2.2rem;
line-height: 1.6;
} |
