Style des input contenu dans un Fieldset [Résolu]

[crazyyann]

Bonjour,

je souhaiterai savoir s'il était possible d’appliquer un style au balise input contenu dans un fieldset sans avoir à créer une nouvelle class.

J'aimerais faire quelque chose dans ce style:

Code :

1
2
3
4
5
6
7
8
9
10
fieldset.input
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #fff;
	border: 1px solid #990000;
	color: #333333;
 
}

plutôt que de devoir faire ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
.InputDansFieldset
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #fff;
	border: 1px solid #990000;
	color: #333333;  
}
 
<fieldset>
<input type="text" class="InputDansFieldset"   name="Text"/>
</fieldset>

C'est possible?

Merci d'avance.

[Nheo_]

Bonjour,

Tu n'étais pas loin :

Code :

1
2
3
4
5
6
7
8
9
10
fieldset input
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #fff;
	border: 1px solid #990000;
	color: #333333;
 
}

[vaneck]

Bien sur c'est possible, cependant je ne peux pas te répondre precisement tant que je ne connais pas ton DOM.
En partant du princinpe que tu n'as qu'un seul fieldset, ceci devrait suffire:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
fieldset input
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #fff;
	border: 1px solid #990000;
	color: #333333;
 
}

En effet , en css , toute les balises sont selectionnable en ecrivant seulement leur nom.

[crazyyann]

Merci cela fonctionne.

Encore une petite chose, est ce que je peux simplifier ça :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
fieldset input
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #FFFFEA;
	border: 1px solid #990000;
	color: #333333;
 
}
 
fieldset textarea
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #FFFFEA;
	border: 1px solid #990000;
	color: #333333;
 
}
 
fieldset select{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #FFFFEA;
	border: 1px solid #990000;
	color: #333333;
 
}

en quelque chose comme ça:

Code :

1
2
3
4
5
6
7
8
9
10
11
 
fieldset input,textearea,select
{
	-moz-border-radius: 4px 4px 4px 4px; /*coins arrondis FireFox*/
	-webkit-border-radius:4px 4px 4px 4px;/*coins arrondis Chrome*/
	border-radius: 4px 4px 4px 4px;
	background-color: #FFFFEA;
	border: 1px solid #990000;
	color: #333333;
 
}

[vaneck]

Non.

fieldset input,textearea,select ==> signifie "selectionne input dans fieldset + tous les textarea + tous les select". Bon , visuellement , ca peut marcher , mais pour plus de securité il vaut mieux ecrire:
fieldset input,fieldset textearea, fieldset select
Ou à la rigueur , si tu n'as que ces 3 élément dans ton fieldset:
fieldset *

[ornitho13]

si tu veux simplifier encore plus, tu peux également simplifier le border-radius :

Code :

1
2
3
-moz-border-radius: 4px; /*coins arrondis FireFox*/
-webkit-border-radius:4px;/*coins arrondis Chrome*/
border-radius: 4px;

[vaneck]

ornitho13 si tu le prend comme ca, on peut aussi se contenter d'un :
border-radius: 4px;
En effet, ff4 comme le dernier chrome n'ont plus besoin d'extension proprio!

[ornitho13]

oui c'est vrai ! tu as bien raison !

[crazyyann]

Je vous remercie pour toute ces précisions.