CSS sur les boîtes de saisie

J'ai une question sur le style des champs de formulaire avec CSS

J'ai un code CSS:

#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}

Maintenant ce code de styles de tous les trois de la les champs de Saisie, j'ai (ci-dessous), mais aussi les styles de l'image bouton "soumettre" j'ai

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

Donc, puis-je modifier le CSS et créer:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

Cela empêche le style CSS de l'image bouton soumettre, mais maintenant, il n'est pas le style le champ mot de passe - j'ai donc essayé:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

Mais cela n'a eu aucun effet.

La question est donc, comment puis-je permet au CSS style sur le texte de saisie et de saisie de mot de passe champs - mais pas dans le style de l'image bouton soumettre?

Merci d'avance!

Comme une question de fait, vous avez une faute de frappe dans votre CSS: le dernier char de la règle pour l'entrée type de bouton est ), mais doit être }.

OriginalL'auteur Geo Man | 2011-11-12

Ce dont vous avez besoin à la recherche est css selectors: Sélecteur CSS pour les champs de saisie de texte?.

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;width: 200px;
}
#form input[type="password"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
#form input[type="button"] {
    border: 0px;
}

OriginalL'auteur Nicolás Ozimica

1

Il y a une option vous pouvez ajouter

Pour vos champs de texte
```
#form input[type=text] {}
```
Pour votre champs de mot de passe
```
#form input[type=password] {}
```
Pour votre bouton champs
```
#form input[type=button] {}
```
Ou il suffit d'ajouter une classe à votre champ de mot de passe, un mot de passe.

OriginalL'auteur Niels

Utiliser le type de l'entrée dans le cadre de votre sélecteur:

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

C'est le sélecteur d'attribut.

Vous pouvez toujours juste ajouter une classe pour vos boîtes de saisie:

<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">

Avec:

#form input.styled {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

OriginalL'auteur Bojangles

Vous manque l' .mot de passe et .bouton de classes de votre html.

<input type="text" class="text" name="email" id="email">
<input type="password" class="password" value="" name="password" id="password">
<input name="button" class="button" type="image" src="go.jpg" alt="Submit" align="right">

OriginalL'auteur Doozer Blake

0

Vous n'avez pas mis une classe sur vos entrées? .les mots de passe signifie class="mot de passe" dans votre code html

OriginalL'auteur
0

Que vous pourriez faire ce

Ne pas le style de la input élément sur son propre, mais au lieu de cibler uniquement les éléments que vous voulez.

D'abord, se débarrasser de ce css
```
#form input {/* styles here*/}
```
Ensuite ce faire
```
#form input.text, #form input#password{
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
```
La virgule sépare les deux éléments, mais s'applique à la css à chaque.

Alors vous n'avez pas besoin de "reset" de la frontière sur l'image avec le bouton soumettre.

Par ailleurs, votre mot de passe input a un id en fonction de votre code et pas un class, de sorte que vous besoin de l' # au lieu de la ..

OriginalL'auteur Jason Gennaro

FORME "entrées" dans le CSS:

De saisie de texte:

input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */

Bouton:

input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */

Case:

input[type="checkbox"] {...}

Groupe de boutons:

input[type="radio"] {...}

Liste déroulante:

select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */

OriginalL'auteur procma

juste supprimer la deuxième ligne sur votre css et ajouter "texte" de la classe à votre type de mot de passe d'entrée. VERSION CORRECTE CI-DESSOUS:

CSS:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

HTML:

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

OriginalL'auteur v.orujov

Vous devez vous connecter pour publier un commentaire.