CSS : définir la largeur d’un champ texte proprement

Lorsqu’un champ texte déborde d’un formulaire, d’une barre de recherche ou d’un bloc latéral, on pense souvent que l’attribut HTML size suffit à régler le problème.

En pratique, ce n’est pas le bon réflexe. Pour contrôler proprement la largeur d’un champ texte, il faut utiliser CSS : width, max-width, box-sizing, et parfois clamp() pour un comportement responsive.

L’attribut HTML size définit le nombre de caractères visibles dans certains champs input. Il ne remplace pas une largeur CSS fiable dans une interface moderne. MDN précise que, pour un élément input, size correspond au nombre de caractères visibles pendant l’édition de la valeur.

Le problème : un champ texte trop large

Imaginons un champ de recherche placé dans une zone étroite : une sidebar, un menu mobile, un header, un widget WordPress ou un petit formulaire d’inscription.

Le HTML ressemble souvent à ceci :

<label for="recherche">Recherche</label>
<input
    id="recherche"
    name="recherche"
    type="search"
    size="15"
>Code language: HTML, XML (xml)

On pourrait croire que size="15" force le champ à mesurer exactement quinze caractères de large. Pourtant, selon la police, le navigateur, les styles hérités, le padding, la bordure et le contexte du layout, le résultat peut varier.

Et surtout, size ne règle pas le vrai problème : intégrer le champ dans une mise en page CSS.

La bonne solution : définir la largeur en CSS

Pour définir la largeur réelle d’un champ texte, utilisez la propriété CSS width. Par défaut, width définit la largeur de la zone de contenu. Avec box-sizing: border-box, elle définit plutôt la largeur totale, bordure et padding inclus.

Exemple simple :

#recherche {
    width: 15rem;
}Code language: CSS (css)

Ici, le champ mesure 15rem. L’unité rem se base sur la taille de police racine du document. C’est généralement plus prévisible que em, qui dépend de la taille de police de l’élément ou de son parent.

Pour un champ de formulaire moderne, j’ajouterais presque toujours box-sizing: border-box :

#recherche {
    box-sizing: border-box;
    width: 15rem;
}Code language: CSS (css)

Cette règle évite le grand classique : “j’ai défini une largeur, puis le padding et la bordure l’ont agrandie”. CSS adore ce genre de petite blague. Nous, un peu moins.

Version responsive recommandée

Dans une interface actuelle, un champ texte doit rester utilisable sur mobile. Une largeur fixe peut donc poser problème si l’écran ou le conteneur est plus étroit.

La version la plus sûre consiste à combiner width: 100% et max-width :

.search-form input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 20rem;
}Code language: CSS (css)

Avec cette approche, le champ peut prendre toute la largeur disponible, sans dépasser 20rem. Il s’adapte donc mieux aux sidebars, colonnes étroites, formulaires flexibles et menus mobiles.

Pour un champ qui doit toujours rester contenu dans son parent, vous pouvez utiliser :

.search-form input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}Code language: CSS (css)

C’est particulièrement utile sur WordPress, où les styles du thème, des blocs, du formulaire de recherche et des extensions peuvent se superposer.

Utiliser clamp() pour une largeur fluide

Pour un champ qui doit varier proprement entre une largeur minimale et une largeur maximale, clamp() est très pratique. La fonction accepte trois valeurs : minimum, valeur préférée et maximum.

.search-form input[type="search"] {
    box-sizing: border-box;
    width: clamp(12rem, 50vw, 24rem);
}Code language: CSS (css)

Cette règle dit au navigateur : le champ doit mesurer au minimum 12rem, idéalement 50vw, mais jamais plus de 24rem.

C’est une bonne solution pour les formulaires dans un header ou une section hero, où l’espace disponible change beaucoup selon l’écran.

Différence entre size, width et maxlength

Il ne faut pas confondre size, width et maxlength. Ils ne servent pas au même objectif.

Attribut ou propriété	Rôle	Exemple
size	Définit le nombre de caractères visibles dans le champ	size="20"
width	Définit la largeur CSS du champ	width: 20rem;
maxlength	Limite le nombre de caractères que l’utilisateur peut saisir	maxlength="80"

Donc, si vous voulez contrôler l’apparence du champ, utilisez CSS. Si vous voulez limiter la longueur de saisie, utilisez maxlength. Et si vous voulez donner une indication HTML de largeur visible, size peut encore servir, mais il ne doit pas piloter votre layout.

Exemple HTML propre pour un champ de recherche

Voici une base HTML simple et propre :

<form class="search-form" role="search" method="get" action="/">
    <label class="search-form__label" for="site-search">Rechercher</label>

    <input
        class="search-form__input"
        id="site-search"
        name="s"
        type="search"
        autocomplete="search"
        placeholder="Rechercher…"
    >

    <button class="search-form__button" type="submit">OK</button>
</form>Code language: JavaScript (javascript)

Et voici le CSS correspondant :

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.search-form__label {
    flex-basis: 100%;
}

.search-form__input {
    box-sizing: border-box;
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    font: inherit;
}

.search-form__button {
    padding: 0.6rem 0.9rem;
    font: inherit;
    cursor: pointer;
}Code language: CSS (css)

Le détail important ici est min-width: 0. Dans un layout flex, un champ peut refuser de rétrécir correctement si son contenu impose une largeur minimale. Cette règle aide l’input à rester dans son conteneur.

Exemple WordPress : cibler le champ de recherche natif

Dans WordPress, le champ de recherche natif utilise souvent un markup proche de celui-ci :

<form role="search" method="get" class="search-form" action="https://example.com/">
    <label>
        <span class="screen-reader-text">Rechercher :</span>
        <input type="search" class="search-field" placeholder="Rechercher…" value="" name="s">
    </label>
    <input type="submit" class="search-submit" value="Rechercher">
</form>Code language: JavaScript (javascript)

Vous pouvez donc cibler le champ avec :

.search-form .search-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 22rem;
}Code language: CSS (css)

Si le champ est dans une sidebar ou un widget, vous pouvez forcer une largeur pleinement responsive :

.widget .search-form .search-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}Code language: CSS (css)

Pour GeneratePress, un sélecteur prudent peut ressembler à ceci :

.inside-right-sidebar .search-form .search-field,
.inside-left-sidebar .search-form .search-field {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}Code language: CSS (css)

Ce type de règle corrige les débordements sans toucher au HTML généré par WordPress ou le thème.

Définir la largeur de tous les champs texte d’un formulaire

Pour harmoniser un formulaire complet, ciblez les types de champs concernés :

.form input[type="text"],
.form input[type="search"],
.form input[type="email"],
.form input[type="url"],
.form input[type="tel"],
.form input[type="password"],
.form textarea,
.form select {
    box-sizing: border-box;
    width: 100%;
    max-width: 32rem;
    font: inherit;
}Code language: CSS (css)

Cette règle couvre les principaux contrôles de formulaire textuels, tout en évitant de cibler les cases à cocher, boutons radio et boutons de soumission.

Pour les formulaires longs, vous pouvez aussi limiter la largeur du conteneur plutôt que chaque champ individuellement :

.form {
    max-width: 42rem;
}

.form input[type="text"],
.form input[type="search"],
.form input[type="email"],
.form textarea,
.form select {
    box-sizing: border-box;
    width: 100%;
}Code language: CSS (css)

C’est souvent plus propre : le formulaire définit le rythme général, les champs remplissent l’espace disponible, et tout reste cohérent.

Unités recommandées : px, em, rem, %, ch

Plusieurs unités CSS peuvent servir à dimensionner un champ texte. Le bon choix dépend du contexte.

Unité	Usage conseillé	Exemple
px	Largeur fixe très précise	width: 240px;
rem	Largeur stable liée à la taille de police racine	width: 20rem;
em	Largeur liée à la taille de police du contexte	width: 20em;
%	Champ fluide dans son conteneur	width: 100%;
ch	Largeur approximative en caractères	width: 30ch;

Pour un champ de recherche ou d’email, rem, % et clamp() donnent généralement les meilleurs résultats. Pour un champ très spécifique, comme un code postal ou un code court, ch peut être intéressant.

Exemple pour un code postal :

.postcode-field {
    box-sizing: border-box;
    width: 8ch;
}Code language: CSS (css)

Attention toutefois : ch dépend de la police utilisée. Ce n’est pas une mesure parfaite du nombre exact de caractères, mais c’est pratique pour des champs courts.

Ne pas casser l’accessibilité

Un champ texte ne doit pas seulement “rentrer dans la maquette”. Il doit aussi rester lisible, cliquable et utilisable au clavier.

Gardez ces règles simples :

• Associez toujours un label au champ avec for et id, ou utilisez un label englobant.
• Évitez les champs trop étroits, surtout sur mobile.
• Gardez une taille de police lisible, idéalement héritée avec font: inherit.
• Ne supprimez pas le focus visible sans le remplacer par un style clair.
• N’utilisez pas uniquement le placeholder comme libellé.

Un champ bien dimensionné, mais impossible à utiliser, reste un mauvais champ. Il est peut-être joli. Mais il est mauvais. La beauté ne compensera pas un formulaire frustrant.

La solution rapide à retenir

Si vous devez corriger rapidement un champ texte qui déborde, commencez par cette règle :

input[type="text"],
input[type="search"],
input[type="email"],
textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}Code language: CSS (css)

Ensuite, adaptez la largeur maximale au contexte :

.search-form input[type="search"] {
    max-width: 22rem;
}Code language: CSS (css)

Dans la plupart des cas, cela suffit à corriger un champ trop large sans toucher au HTML.

Conclusion

Pour définir la taille d’un champ texte, n’utilisez pas size comme outil de mise en page. Cet attribut indique surtout un nombre de caractères visibles ; il ne remplace pas une largeur CSS maîtrisée.

La solution moderne consiste à utiliser width, max-width et box-sizing: border-box. Pour un champ responsive, ajoutez width: 100%, ou utilisez clamp() lorsque vous voulez une largeur fluide avec limites.

La règle à garder sous le coude :

.search-form input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 22rem;
}Code language: CSS (css)

C’est simple, robuste, responsive, et cela évite que votre champ de recherche parte vivre sa meilleure vie en dehors du design.

Sources

• MDN : attribut HTML size
• MDN : propriété CSS width
• MDN : propriété CSS box-sizing
• MDN : fonction CSS clamp()
• MDN : élément HTML input

Report a typo