28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je rencontre un problème au niveau du style des balises <input>.

J'ai créé une class pour styler les <input> type text :
input {background-color:#FFFFFF; border:1px solid #600060; margin:2px}


Sous Firefox, seules les <input> type text sont stylées ; pas les <input> type checkbox.

Sous IE, toutes les balises <input> sont stylées ! même les checkboxs (voir image).

upload/2678-screen.png

Y a t'il moyen de ne styler que les balises <input> type text ? sans que cela style les <input> type checkbox ?

Merci.
Modifié par Sammuel (18 Oct 2005 - 21:06)
salut ...
en gros j'ai la même question ...
j'aimerai ne pas avoir cette bordure disgracieuse sur mes checkbox dans IE ...
vous avez une idée ?
++
Bonjour,

Les styles des contrôles de formulaires sont inconsistants d'un navigateur et d'un OS à l'autre.

Il faut au minimum passer par une classe appliquée au type de contrôle que l'on veut styler.
ouaip ...c'est ce que j'ai fais au final ...mais je me demandais si il n'y avais pas plus simple en fait ...


.NoBorder { 
     border: 0px;
}


merc

++
Modifié par NAS (21 Aug 2006 - 14:52)
Je ne poste pas pour donner une solution 100% efficace mais plus pour donner une solution alternative pour le site respectant les css 2 et plus.

On peut jouer sur les sélecteurs dans ce cas là.

On fera un style pour les input de type text et les textarea :


input[type=text], textarea {...}


Dans cet exemple, on définit seulement un texte pour les input dont l'attribut type est égal à texte.
Cela peut se faire pour toute les balises et tous les attributs.
Un autre exemple serait de faire un style particulier quand un paragraphe est en anglais.

p[lang=en] {background: url('drapeaux_uk.png') no-repeat top left;padding-left:10px}

Dans ce cas, on aurait un petit drapeaux anglais devant un paragraphe dans la langue de shakspeare. Cela est utile quand on cite un texte d'une autre langue dans son site français.

*******EDIT*******
Dois-je ajouter que bien sûr, ce type de manipulation css ne fonctionne pas sous notre cher IE

Beaucoup d'infos sur : http://www.yoyodesign.org/doc/w3c/css2/selector.html
Modifié par trigun (21 Aug 2006 - 14:59)
Oui, c'est donc actuellement totalement théorique, sauf cas (plus sage ou plus fou, je ne sais pas, mais en tous cas peu crédible) où l'on accepte que le rendu dans le principal navigateur du marché soit le moins conforme à la charte graphique...