Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
Problème taille input
Résolu
Bonjour, Bonsoir,
Les champs de texte (inputs) de mon site dépassent toujours la taille maximale ( voir img )
Et cela fait au total 4h que je cherche la solution....
Code HTML :
<div class="container">
<form class="form fakeform">
<h1 class="title" text="size-lg center">Log in</h1>
<div class="separator"></div>
<div class="form fakeform">
<input type="text" text="size-md" w="4/4">
</div>
</form>
</div>
Code CSS :
.form {
background-color: rgba(255, 255, 255, 0.45);
border-radius: 5px;
margin: 20px;
padding: 10px 0px 10px 0px;
}
.form input {
padding: 10px;
border: 1px solid black;
border-radius: 0px;
}
.form input[type="text"] {
border-radius: 5px;
}
.form input[type="submit"] {
cursor: pointer;
}
/***********************/
*[w="4/4"] {
width: 100%;
}
Merci d'avance de l'aide que vous m'apporterez ^^
Re @Space001,
Au final j'ai utilisé bootstrap pour regarder le code source et non l'utiliser.
Et je me suis rendue compte de border-sizing: border-box; avec un width: 100%; est ça a résolu mon problème ^^.
Bonne continuation. 😁
Re @Space001,
Au final j'ai utilisé bootstrap pour regarder le code source et non l'utiliser.
Et je me suis rendue compte de border-sizing: border-box; avec un width: 100%; est ça a résolu mon problème ^^.
Bonne continuation. 😁
Re @Space001,
Désolé pour le temps, j'ai un problème de connexion chez moi et donc un retard des mails et je ne pensais plus à çà...
Ce que tu m'as proposé n'a toujours pas l'air de fonctionner...
Merci de l'aide que tu m'as proposée, mais du coup, j'ai de multiples problèmes à cause de mon css, donc je vais réutiliser le framework bootstrap..
Re @CrafterHide,
Nous n'avons pas eu de retour de ta part...
La solution que je t'ai proposé a-t-elle pu t'aider ? 🤔
Bonne journée à toi et bonnes fêtes 😎
Re @CrafterHide,
Je pense avoir trouvé la solution 👌
Modifie la propriété .form-input de ta feuille de style comme ceci :
.form input {
margin-inline: -3px;
border: 1px solid black;
border-radius: 5px;
}
Dans l'attente de ton retour,
A très vite 😉
Re @Space001,
À part FontAwesome pour les icons, je n'utilise aucun framework.
Merci encore pour ton aide.
Re @CrafterHide,
J'espère que le temps que j'ai mise pour répondre ne dérange pas beaucoup..
Non ne t'inquiète pas, aucun soucis 😉
Cela ne règle pas mon problème...
C'est étrange, j'ai pourtant tester sur codepen et ça avait l'air d'être good... 😕
Utilises-tu un framework qui pourrait éventuellement faire conflit (bootstrap ou autre...) ? 🤔
Re @Space001,
Dans le css j'ai modifié la ligne dont tu me parlais et voici le résultat :
Cela ne règle pas mon problème...
J'espère que le temps que j'ai mise pour répondre ne dérange pas beaucoup.. 😅
Merci pour l'aide que tu me portes.
Re @CrafterHide,
Dans ta propriété CSS .form-input, modifie la ligne suivante :
.form input {
padding: 0px;
Dis-moi si c'est good de ton coté 😉
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.