web-dev-qa-db-fra.com

Sélecteur SCSS / CSS pour sélectionner tous les types d'entrée

J'ai un type d'entrée a ce paramètre scss (du cadre)

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
...
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
{
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
}

J'aime remplacer/réinitialiser tout, quelque chose de similaire

textarea,
input[type="*"],
{
  @include box-shadow(none);
}

ci-dessus ne fonctionne pas, également

textarea,
    input,
    {
      @include box-shadow(none);
    }

pas assez précis. Existe-t-il un moyen de le faire que de répertorier tous les types possibles.

Merci.

csscss-selectorssass
20
bsr

Il existe de nombreux types d'entrée possibles. Si vous voulez des zones de texte et toute entrée ayant un attribut type, alors ...

textarea,
input[type] {
    ...
}

Si vous souhaitez exclure certains types d'entrée, utilisez le :not sélecteur. MODIFIER L'EXEMPLE JSFIDDLE http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

Mais comme je l'ai dit, il y a probablement beaucoup plus de types que vous ne voulez pas que de types que vous voulez, donc vous ne pouvez pas vraiment éviter la liste.

Vous pouvez toujours utiliser une classe CSS à la place.

.box-shadowed
{
  @include box-shadow(none);
}
38
Louis Ricci

Cela suffira-t-il?

input[type="text"] {
    border: 1px red;
}

input[type] {
    border: 1px solid blue; }
}

Ils ont tous deux la même spécificité, donc le dernier l'emporte.

Voir jsFiddle: http://jsfiddle.net/TheNix/T2BbG/

Une autre solution consisterait à retirer l'élément du premier sélecteur. Ce dernier aurait une spécificité plus élevée - cependant, vous devez savoir qu'en termes de performances, le premier est similaire à l'utilisation d'un sélecteur universel (car il tente de faire correspondre tous les éléments du DOM, pour vérifier l'attribut).

[type="text"] {
    border: 1px red;
}

input[type="text"] {
    border: 1px solid blue; }
}
5
Nix