[CSS] alleen voor input text

[RickyHeijnen]

Ik heb gehoord dat je de volgende code kunt gebruiken om een CSS stijl toe te passen voor alleen input textfields.

code:

input[type="text"] { background-color: green; width: 200px; }

Nu het probleem... het werkt niet hahah, maar ik kan ook niet vinden hoe dit heet dus moeilijk te googlen.

Kan iemand mij opweg helpen?

[Res-q]

<input type="text" style="background-color: green; width: 200px;" />

Dat bedoel je?

[Blaise]

Het werkt wel, maar niet in Internet Explorer.

Je kan er een class aan hangen, of alle text inputs in een fieldset zetten zodat je de text input velden apart kan benaderen.

[Verwijderd]

Tussen je head:

code:

<style>
input {
   background-color: green; width: 200px;
}
</style>

En je hebt je style

[ Voor 7% gewijzigd door Verwijderd op 01-12-2006 08:42 . Reden: <style>.. vergeten ]

[Verwijderd]

Het werkt inderdaad niet goed in sommige browsers.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

[Koppensneller]

Verwijderd schreef op vrijdag 01 december 2006 @ 08:42:
Tussen je head:

code:

<style>
input {
   background-color: green; width: 200px;
}
</style>

En je hebt je style

Maar dan heeft ie het voor alle input elementen, en niet alleen voor de textboxen zoals hij wilde...

[mithras]

@ ZktaS& Res-q: dat werkt niet, want dan style je alle elementen, niet alleen de textfields

Verder is de css soort[att=value] een css2 standaard die IE uiteraard niet (goed) ondersteund. Je zou het kunnen oplossen door een class toe te wijzen aan het textfield of spelen met een hierarchische structuur:

HTML:

<div id="menu"><input type="text" name="bla1"></div>
<div id="content"><input type="text" name="bla2"></div>

Cascading Stylesheet:

#menu input{
  background-color: green; width: 200px;
}

Stijlt alleen het input element in het menu. Maar het is maar de vraag of de structuur er bij jou zo is dat je dat kan doen.

[sQuarecoW]

het lijkt me dan wijzier om gewoon een class aan je input field toe te wijzen? Zo doe ik dat ook met mn submitbuttons

HTML:

<input type="text" value="deze wordt zoals alle anderen" />
<input type="text" class="green" value="deze wordt zoals de anderen, maar dan groen" />

[_Thanatos_]

Gewoon IE6 de vinger geven, en zeggen "gebruik maar een echte browser"

Of deze IE7 gebruiken...

[mithras]

sQuarecoW schreef op vrijdag 01 december 2006 @ 09:43:
het lijkt me dan wijzier om gewoon een class aan je input field toe te wijzen? Zo doe ik dat ook met mn submitbuttons

HTML:

<input type="text" value="deze wordt zoals alle anderen" />
<input type="text" class="green" value="deze wordt zoals de anderen, maar dan groen" />

Imho is dat wel ugly, dus _als_ de verschillende input elementen door de stuctuur wel gescheiden van elkaar zijn, kan je beter daarop stijlen. Dan heb je niet een extra class nodig om dit aan te geven. Zie ook het menu in mijn site:

HTML:

<div id="menu">
    <h2>Menu</h2>
        <ul>
            <li id="home"><a href="http://juriansluiman.nl/">Home</a></li>
        </ul>
    <h2>Gebruiker</h2>
        <p>Geen account? Registreer je <a href="user/register">hier</a></p></div>

Cascading Stylesheet:

a{
    font-weight: bold;
}
#menu li a{ /*geldt dus alleen voor <a> binnen <li> binnen #menu*/
    display: block;
    width: 150px;
    color: #fff;
    border: 1px solid #000;
    line-height: 20px;
    background-color: #30A9D6;
}

Natuurlijk kan dit niet altijd, en dan moet je maar afwegen of deze specifieke layout echt nodig is, of dat je IE gewoon negeert en je gebruikers vertelt dat ze maar een echte browser moeten gebruiken.

[Verwijderd]

Of met javascript (voor IE < 7 met een conditional comment includen) voor alle input elementen van het type text een style definieren.

[sQuarecoW]

mithras86 schreef op vrijdag 01 december 2006 @ 10:40:
[...]
Imho is dat wel ugly, dus _als_ de verschillende input elementen door de stuctuur wel gescheiden van elkaar zijn, kan je beter daarop stijlen. Dan heb je niet een extra class nodig om dit aan te geven.

Inderdaad, maar _als_ je dus onderscheid wilt maken en al je velden staan door elkaar (text, checkbox, submit) of in een div, omdat ze bij elkaar horen (zoals bij een gemiddeld form ), _dan_ is het toch niet zo ugly?

[tec]

om te voorkomen dat je je submit button styled als je input fields kun je voor je submit button het <button> element gebruiken, welke je dan natuurlijk gewoon met button { } aan kan spreken in je css. Het button element kun je verschillende properties geven <button type="submit">verzenden</button> bijvoorbeeld.

Overigens groepeer je je form elements met een <fieldset>, je zou dus je fieldsets ids kunnen geven om zo specifiek input fields aan te spreken die fieldsets.

Ik gebruik meestal maar een class om IE nog te redden.

dus voor de moderne fatsoenlijke browser input[type="text"] {} en dan voor IE een class text aan het field hangen en input.text {} toevoegen aan de stylesheet. Als je het echt schoon wilt houden zou je die ie class er via javascript aan kunnen hangen na een check of de browser attribute selectors ondersteund.

Een classe "green" noemen is trouwens ook niet echt relaxed.. Stel je wilt de kleur van het veld later veranderen dan zou je je classe moeten renamen. Je kunt beter een naam kiezen die los van de stijl staat.

[ Voor 5% gewijzigd door tec op 01-12-2006 11:54 ]

[daniëlpunt]

tec schreef op vrijdag 01 december 2006 @ 11:53:
Een classe "green" noemen is trouwens ook niet echt relaxed.. Stel je wilt de kleur van het veld later veranderen dan zou je je classe moeten renamen. Je kunt beter een naam kiezen die los van de stijl staat.

Een semantisch verantwoorde naam indd

[sQuarecoW]

super-muffin schreef op vrijdag 01 december 2006 @ 12:39:
[...]

Een semantisch verantwoorde naam indd

Duh.. zie de grote kracht van een voorbeeld

[tec]

sQuarecoW schreef op vrijdag 01 december 2006 @ 13:15:
[...]


Duh.. zie de grote kracht van een voorbeeld

Maar in je voorbeeld gebruik je juist een verkeerde classname of mis ik iets...

[Verwijderd]

Oke oke sorry

code:

<style>
input#myStyle {
   JE STYLE
}
</style>
.. 
<input id="myStyle"....

/me moet voortaan maar beter lezen wat meneer TS wil

[ Voor 1% gewijzigd door Verwijderd op 01-12-2006 22:41 . Reden: class="" moest id="" zijn.. stomme fout :) ]

[Verwijderd]

Verwijderd schreef op vrijdag 01 december 2006 @ 22:12:
Oke oke sorry

code:

<style>
input#myStyle {
   JE STYLE
}
</style>
.. 
<input class="myStyle"....

/me moet voortaan maar beter lezen wat meneer TS wil

en dan is het mijns inziens weer netter om:

Cascading Stylesheet:

.myStyle input {

}
/* of */

input .myStyle{

}

te gebruiken , dan kan je hem namelijk voor meerdere textboxes gebruiken

[ Voor 10% gewijzigd door Verwijderd op 01-12-2006 22:32 ]

[Zerora]

Volgens mij kun je het zo doen:

Cascading Stylesheet:

...
input:text
  {
    background-color: green;
    width: 200px;
  }
...

Niet getest overigens hoor

[ Voor 11% gewijzigd door Zerora op 01-12-2006 22:36 ]

[Verwijderd]

Verwijderd schreef op vrijdag 01 december 2006 @ 22:31:
[...]


en dan is het mijns inziens weer netter om:

Cascading Stylesheet:

.myStyle input {

}
/* of */

input .myStyle{

}

te gebruiken , dan kan je hem namelijk voor meerdere textboxes gebruiken

Hoe bedoel je?
Met input#id kan je het ook met meerdere input's gebruiken.

offtopic:
Ik gebruikte class="" in me vorige post, dit moest id="" zijn

[user109731]

Verwijderd schreef op vrijdag 01 december 2006 @ 22:41:
[...]


Hoe bedoel je?
Met input#id kan je het ook met meerdere input's gebruiken.

offtopic:
Ik gebruikte class="" in me vorige post, dit moest id="" zijn

id is een soort unieke identifier voor een element, class is meer een uitbreiding van het element zeg maar. Heeft daarbij ook als voordeel dat je meerdere classes aan 1 element kunt hangen:

HTML:

<style type="text/css">
  .important { border:1px solid red }
  .input { background-color:#eee }
</style>

<input class="input">
<input class="input important">
<p class="important">...

Een id hoort dus uniek te zijn, in tegenstelling tot een class, die je aan meerdere elementen kunt hangen.

[Verwijderd]

Verwijderd schreef op vrijdag 01 december 2006 @ 22:31:
[...]


en dan is het mijns inziens weer netter om:

Cascading Stylesheet:

.myStyle input {

}
/* of */

input .myStyle{

}

te gebruiken , dan kan je hem namelijk voor meerdere textboxes gebruiken

Van die CSS in combinatie met deze HTML: <input class="myStyle"... klopt overigens ook geen ene moer..

[Verwijderd]

Grote prutser schreef op vrijdag 01 december 2006 @ 23:12:
[...]

id is een soort unieke identifier voor een element, class is meer een uitbreiding van het element zeg maar. Heeft daarbij ook als voordeel dat je meerdere classes aan 1 element kunt hangen:

HTML:

<style type="text/css">
  .important { border:1px solid red }
  .input { background-color:#eee }
</style>

<input class="input">
<input class="input important">
<p class="important">...

Een id hoort dus uniek te zijn, in tegenstelling tot een class, die je aan meerdere elementen kunt hangen.

Aha dit kan nog best van code schelen! Bedankt voor de uitleg

/me gaat wat sheets aanpassen...

[Verwijderd]

Verwijderd schreef op zaterdag 02 december 2006 @ 02:13:
[...]
Van die CSS in combinatie met deze HTML: <input class="myStyle"... klopt overigens ook geen ene moer..

Van je Nederlands ook niet

Maar als je dan zo wijselijk m'n CSS afkraakt... leg dan tenminste uit wat er fout is volgens jou...

[Victor]

Zerora schreef op vrijdag 01 december 2006 @ 22:36:
Volgens mij kun je het zo doen:

Cascading Stylesheet:

...
input:text
  {
    background-color: green;
    width: 200px;
  }
...

Niet getest overigens hoor

Naar mijn weten bestaat er geen text pseudo class, dus dit gaat niet werken. Gebruik een attribute selector (wat niet in IE werkt), hang een class aan het input element of zorg voor een child selector op basis van bovenliggende elementen.

Verwijderd schreef op zondag 03 december 2006 @ 14:12:
[...]


Van je Nederlands ook niet

Maar als je dan zo wijselijk m'n CSS afkraakt... leg dan tenminste uit wat er fout is volgens jou...

Cascading Stylesheet:

input .myStyle

Haal de spatie weg, op deze manier selecteer je alle elementen met de myStyle class die onder het input element gelegen zijn. Naast het feit dat je op deze manier niet je input element bereikt (wat je in dit geval wil), is dit bovendien niet mogelijk omdat het input element geen children kan hebben.

[Verwijderd]

Verwijderd schreef op zondag 03 december 2006 @ 14:12:
[...]


Van je Nederlands ook niet

Maar als je dan zo wijselijk m'n CSS afkraakt... leg dan tenminste uit wat er fout is volgens jou...

Nou bijvoorbeeld:

Cascading Stylesheet:

input .myStyle { }

wat matcht op een element met class myStyle die een descendant is van een input, iets wat onmogelijk is in HTML. Je bedoelt waarschijnlijk:

Cascading Stylesheet:

input.myStyle { }

(zonder de spatie) wat matcht op inputs met class myStyle.

[Verwijderd]

ok thx.. dat wist ik niet, het werkt namelijk wel normaal gesproken, en aangezien je inderdaad geen descendants kan hebben van een input zal het daarom wel allemaal goed gaan! Ik neem aan dat de notatiewijze met spatie betekend: het element zelfe + alle descendants (iets wat dus niet mogelijk is)

[mithras]

Verwijderd schreef op maandag 04 december 2006 @ 10:02:
ok thx.. dat wist ik niet, het werkt namelijk wel normaal gesproken, en aangezien je inderdaad geen descendants kan hebben van een input zal het daarom wel allemaal goed gaan! Ik neem aan dat de notatiewijze met spatie betekend: het element zelfe + alle descendants (iets wat dus niet mogelijk is)

Dat klopt:

HTML:

<div class="test">
  <div class="test"></div>
</div>

Cascading Stylesheet:

div.test{
  border: 1px solid; /* geeft beide elementen een rand*/
}
div .test{
  border: 1px solid; /* geeft alleen child element een rand*/
}