mise en forme input type text

Bonsoir ou Bonjour, je m'explique

j'ai un formulaire comme ci-dessous:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<form class="fos_user_profile_edit" method="POST" action="/profile/edit?profile_form=second&request=ss1"> <div class="bloc_fact bloc"> <h3>Adresse de facturation:</h3> <div> <label class="required" for="fos_user_profile_form_adrfacturation">Adresse : </label> <textarea id="fos_user_profile_form_adrfacturation" required="required" name="fos_user_profile_form[adrfacturation]"></textarea> </div> <div> <label class="required" for="fos_user_profile_form_codeadrf">Code postal : </label> <!-- ici --><input id="fos_user_profile_form_codeadrf" type="text" required="required" name="fos_user_profile_form[codeadrf]"> </div> <div> </div> <input type="submit" value="Mettre à jour"> </form>

---

et mon but et de selectionné le input où j'ai mis le commentaire ci-dessus, donc en faisant le css suivant cela devrai fonctionné mais non il me prend le troisiéme, rien a y comprendre

Code:

---

1 2 3

.bloc div:nth-child(2) input { width:150px; }

---

Une idée les amis

Pourquoi chercher midi à quatorze heure:

Code:

---

1 2 3

#fos_user_profile_form_codeadrf{ width:150px; }

---

L'idéal serait d'éviter les identifiants à rallonge du style : un_identifiant_tellement long_qu_on_ne_peut_plus_maintenir_le_site

oui je sais que je peux pointer son id direct mais j'utilisais ça pour un autre formulaire et là que ça ne marche pas ça me turlupine, merci pour ta solution mais si tu trouves le souci de ma solution c'est cool car j'aime bien résoudre les solutions même quand je les substitue à une autre

Code:

---

1 2 3

input:nth-child(2) { width:150px; }

---

non, ca marche pas ca, il faut que je capture le deuxiéme div dans un premier temp dans la liste de div pour ca que je fais

Code:

---

1 2 3 4

.bloc div:nth-child(2) { width:150px; }

---

Citation:

---

Envoyé par chlock62

non, ca marche pas

---

Si

Mais bon, la façon de procéder n'est pas idéale.

Placer les input dans le même conteneur parent serait préférable :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<form class="fos_user_profile_edit" method="POST" action="/profile/edit?profile_form=second&request=ss1">   <div class="bloc_fact bloc">   <h3>Adresse de facturation:</h3>   <div> <label class="required" for="fos_user_profile_form_adrfacturation">Adresse : </label> <textarea id="fos_user_profile_form_adrfacturation" required="required" name="fos_user_profile_form[adrfacturation]"> </textarea>   <div id="box"> <label class="required" for="fos_user_profile_form_codeadrf">Code postal : </label> <input id="fos_user_profile_form_codeadrf" type="text" required="required" name="fos_user_profile_form[codeadrf]"> <input type="submit" value="Mettre à jour"> </div> </form>

---

Code:

---

1 2 3 4 5 6 7

#box{ width: 300px; } input:first-of-type { width: 150px; background: red; }

---

http://codepen.io/anon/pen/gDpwB

il me met tous mes input en rouge et il me met aucune taille pour moi, bizarre

@chlock62: Et simplement utiliser une class ? Sinon, les codes de Rodolphebrd fonctionnent (à vous d'adapter si besoin).

Citation:

---

Envoyé par chlock62

non, ca marche pas ca,...

---

Bonjour,
peux-tu préciser :

• quel navigateur tu utilises ? (IE ?)
• quelle version ?

=> https://developer.mozilla.org/fr/docs/CSS/:nth-child
(voir : "Compatibilité des navigateurs")

Merci à tous c'est sympa, je regarde la doc et vous tiens au courant.