CSS op invoervakken

Ik heb een probleem met het in model brengen van verschillende formuliervelden met CSS

Ik heb een CSS-code:

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

Nu codeert deze code alle drie de invoervelden die ik heb (hieronder), maar ook de knop voor het verzenden van afbeeldingen die ik heb

<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">

Dus dan verander ik de CSS en creëer:

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

Dit voorkomt CSS-styling van de knop voor het verzenden van afbeeldingen, maar nu wordt het wachtwoordveld niet gestileerd - dus ik probeerde het:

#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)

Maar dit had geen effect.

Dus de vraag is, hoe kan ik de CSS-styling effectief toestaan ​​in de invoertekst en invoervelden voor wachtwoorden - maar niet om de knop voor het verzenden van afbeeldingen op stijl te maken?

Bij voorbaat dank!

3
In feite heeft u een typfout in uw CSS: de laatste regel van de regel voor de knop voor het invoertype is ) , maar moet } zijn.
toegevoegd de auteur Nicolás, de bron

8 antwoord

Wat je moet onderzoeken is CSS selectors : CSS selector voor tekstinvoervelden? .

#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;
}
1
toegevoegd

Er is een optie die u kunt toevoegen

Voor uw tekstvelden

#form input[type=text] {}

Voor uw wachtwoordvelden

#form input[type=password] {}

Voor uw knopvelden

#form input[type=button] {}

Of voeg gewoon een klasse toe aan uw wachtwoordveld, dat is een wachtwoord.

1
toegevoegd

Gebruik het type invoer als onderdeel van uw selector:

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

Dit is de attribuutselector .

U kunt altijd gewoon een klasse toevoegen voor uw invoervakken:

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

Met:

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

Je zou dit kunnen doen

Ontwerp het element invoer niet op zichzelf, maar richt u alleen op de elementen die u wilt.

Allereerst, verwijder deze CSS

#form input {/* styles here*/}

Doe dit dan

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

De komma scheidt de twee elementen maar past de CSS toe op elk element.

Dan hoeft u de rand van de knop beeld verzenden niet opnieuw in te stellen.

Trouwens, uw wachtwoord invoer heeft een id volgens uw code en niet een class , dus u hebt de # in plaats van de . .

0
toegevoegd

verwijder gewoon de tweede regel van je CSS en voeg de "tekst" -klasse toe aan je wachtwoordtype-invoer. JUISTE VERSIE:

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">
0
toegevoegd

U mist de klassen .password en .button op uw 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">
0
toegevoegd

Je hebt geen klasse op je input gezet? .passwords betekent class = "wachtwoord" in uw html

0
toegevoegd

FORMLE "invoer" in CSS:

Tekst invoer:

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

Knop:

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

checkbox:

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

RadioGroup:

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

Keuzelijst:

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