Définir l'attribut size de la balise via css?

StackOverflow https://stackoverflow.com/questions/119961

  •  02-07-2019
  •  | 
  •  

Question

Normalement, vous pouvez faire ceci: 

<select size="3">
    <option>blah</option>
    <option>blah</option>
    <option>blah</option>
</select>

Et il serait rendu comme une boîte de sélection où les trois options sont visibles (sans descendre)

Je cherche un moyen de définir cet attribut de taille à partir de css.

Était-ce utile?

La solution

Il n’existe pas d’option pour définir la taille, mais si vous le définissez, certains navigateurs vous laisseront définir les propriétés width / height de la manière que vous souhaitez via CSS.

Certains = Firefox, Chrome, Safari, Opera.

Peu de choses fonctionnent dans IE si (pas de surprise)

Vous pouvez cependant, si vous le souhaitez, utiliser des expressions CSS dans IE pour vérifier si l’attribut size est défini et, si tel est le cas, exécutez JS pour le (re) définir à la taille souhaitée ... par exemple 

size = options.length;

Autres conseils

Je ne pense pas que cela soit possible.

Les propriétés CSS sont très génériques (applicables à tout élément) et ne peuvent en aucune manière modifier les fonctionnalités d'un élément (uniquement l'apparence).

L'attribut size modifie au moins la fonctionnalité de l'élément dans le cas où size = 1 / size! = 1.

Essayez ceci: 

select[attr=size] {
    width:auto;
    height:auto;
}

Je ne suis pas d'accord, j'ai pu définir une largeur et une hauteur en utilisant CSS avec quelque chose comme ceci: 

select { width: 5em; height: 5em; }

Fonctionne dans IE (7) aussi bien que je viens de le tester.

En général, vous ne pouvez pas ajouter les attributs définis dans HTML via CSS. Vous pouvez ajouter au code HTML à l'aide des pseudo-sélecteurs: before et: after, mais c'est à peu près tout, ils ne sont toujours pas compatibles avec tous les navigateurs. Si vous avez vraiment besoin de faire cela, je pense que vous devriez avoir recours à Javascript.

Vous pouvez utiliser le sélecteur CSS suivant pour styler des éléments sélectionnés avec l'attribut size: 

select[size]{
/*your style here */
}

Je ne crois pas que cela soit possible non

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top