[CSS] Borders inputveld

[Verwijderd]

Ik heb in een form een input type text, waarvan ik de rand weg wil werken.

code:

.input_yellow
{
  border-top            : 1px solid #FAAF43;
  border-bottom         : 1px solid #FAAF43;
  border-right          : 1px solid #FAAF43;
  border-left           : 1px solid #FAAF43;
}

Ik heb het zo geprobeerd, en border :0 ingesteld, maar dat schaduwrandje blijft staan

[Glashelder]

eh blaat..

[ Voor 83% gewijzigd door Glashelder op 04-06-2004 00:01 ]

[faabman]

kun je misschien wat meer van je html / css posten, want hier kunnen we niet zo veel mee...

[RobIII]

Mooie topic-titel....

Wat probeer je nou precies te bereiken? Want dit:

code:

.myInputBox {
    border : 0px;
}

...werkt bij mij gewoon hoor...

[vorlox]

Je mag geen underscores gebruiken

[faabman]

vorlox schreef op 04 juni 2004 @ 00:02:
Je mag geen underscores gebruiken

je mag wel underscores gebruiken...

[KillR-B]

Punt 1:
Je CSS kan veel korter
.input_yellow {
border: 1px solid #FAAF43;
}

Punt 2: Weet je zeker dat je het inputveld wel de juiste classname gegeven hebt?

Punt 3:
* een duidelijkere titel mag eigenlijk wel ;-)

[vorlox]

oh...mag dat van w3c....heb er gezeur mee gehad in Opera

[Verwijderd]

In welke browser doet ie raar?

Enneh, ik zal maar geen opmerking maken over de benaming van .input_yellow (wat nou als je alleen de kleur van geel naar rood wilt veranderen, dan slaat die naam nergens meer op, en moet je dus toch nog de content gaan veranderen...), damn toch nog gedaan

[Verwijderd]

Allereerst, als ik nou es de titel mocht veranderen....
Ik wist nog niet precies wat ik als titel wilde gebruiken dus had ik alleen het onderwerp er bij gezet. En ben het daarna vergeten aan te passen...

Ten tweede, yellow heeft vrij weinig met de kleur van het ding te maken. Hij heeft toevallig een oranje randje en dat is meteen punt 3...

Als derde, ik heb ook nog eens de verkeerde code gepost. Yellow had niet in de titel moeten zitten enzo ivm met reacties die ik er op verwachtte (en kreeg) en de rand staat in de code op 1px, wat een randje wel zou verklaren....

Genoeg rangtelwoorden gehad ...

Dus onder dezelfde titel nog 1 keer:

code:

.eenInput
{
   border-top          : 0px;
   border-bottom       : 0px;
   border-right        : 0px;
   border-left         : 0px;
   border              : 0px;
}

Mijn input type text behoud de binnenste schaduwrand van de 3d rand die er standaard omheen zit

Probeer het maar eens uit, de rand verwijnt niet onder winXP IE 6.0

[ Voor 13% gewijzigd door Verwijderd op 04-06-2004 08:34 ]

[ludo]

code:

.eenInput
{
    border:0;
}

<input type="text" class="eenInput"/>

Dit levert bij mij gewoon een textinput op zonder borders, in zowel Mozilla 1.6 als IE 6.0 Welke HTML gebruik je voor het textfield?

[ Voor 19% gewijzigd door ludo op 04-06-2004 08:52 ]

[Verwijderd]

Ik zal het nog 1 keer proberen te verduidelijken wat mn code is, en ik moet er bij zeggen dat als ik de stylesheet in een bepaalde volgorde schrijf ik de randen wel weg kan houden (en dan bedoel ik niet de plaatsing, maar letterlijk welke eigenschap ik het eerste typ, waar dan ook in de stylesheet), maar zoiets is ronduit belachelijk, het zou gewoon altijd moeten werken....

CSS:

code:

.inputbasis
{
    font-family       : Comic Sans MS, Arial, sans-serif;
    background-color  : #F3F3FF;
    border-top        : 1px solid #DDDDDD;
    border-bottom     : 1px solid #F7F7FF;
}

.alternatief
{
    text-align        : right;
    border            : 0px;
}

HTML:

code:

<form name="testfrom">
    <input type="text" class="inputbasis alternatief" name="testinput">
</form>

Zoals je ziet moet hij eerst de eigenschappen van inputbasis nemen, en die overschrijven met eventuele aanpassingen in alternatief. Dit zou in theorie een lichtpaars editveld zonder randen op moeten leveren met Comic Sans MS als basisfont. in plaats daarvan levert het bij mij een paars editveld met de border-top en border bottom op. Dat is complete onzin, ik overschrijf de waardes voor de border toch naar 0. Volgens iedere reference die ik kan vinden mag dit en werkt dit. Bovendien pas ik het vaker toe waar zoiets dergelijks wel goed werkt...

Iemand nog ideeen?

[ Voor 23% gewijzigd door Verwijderd op 04-06-2004 09:23 ]

[KillR-B]

Verwijderd schreef op 04 juni 2004 @ 09:19:
...

Iemand nog ideeen?

Onder IE6 werkt je code gewoon, onder elke browser eigenlijk. Gebruik je een speciale XP skin o.i.d? (* KillR-B grijpt maar iets uit de lucht, maar je weet maar nooit )

[ Voor 3% gewijzigd door KillR-B op 04-06-2004 09:25 ]

[Bosmonster]

Doet het toch prima hier.. misschien een XP-specifiek iets.

Probeer verder eens: border-width: 0px;, ipv alleen border: 0px;

[ Voor 21% gewijzigd door Bosmonster op 04-06-2004 09:27 ]

[Verwijderd]

bij mij niet, zowel in Firefox als in IE 6 krijg ik een invulveld zonder border met het prachtige comic-sans als lettertype.

[-Mous-]

Heeft het niet iets met je document type te maken? Welke gebruik je?

[Verwijderd]

ik gebruik geen apart document type, zal wel naar default gaan

Die reactie van bosmonster moet ik thuis testen, want dit werkt hier wel.
Ik kan jullie de code helaas niet werkend laten zien, ik heb vanuit mn werk geen toegang, ik ga straks nog eens wat sleutelen, als het werkt dan laat ik het weten, en anders laat ik het maar en zet ik de borders naar de achtergrondkleur, want dat werkt wel. dan heb ik alleen twee stylesheets nodig

[faabman]

zit je niet gewoon met je standaard xp-styles te werken???

http://support.microsoft....n-us;322240&Product=winxp

om het uit te schakelen

[m33p]

Mischien beetje offtopic maar toch niet helemaal:

border: none; werkt ook, moet het persé 0px zijn of is none ook een standaard?

[RM-rf]

m33p schreef op 04 juni 2004 @ 13:24:
Mischien beetje offtopic maar toch niet helemaal:

border: none; werkt ook, moet het persé 0px zijn of is none ook een standaard?

none is een type van border-style, niet van border-width;
in theorie werkt zelfs border-style:none; border-width: 10px; border-color: purple;.

overigens 0px is dubbelop, het getal 0 behoeft geen maateenheid aangezien 0 centimeter exact even dik is als 0 pixels.

[Verwijderd]

probeer eens:

code:

border: 0; !important

maar nogmaals, het werkt bij iedereen behalve bij jou, misschien een gevalletje PEBKAC?

[Verwijderd]

Verwijderd schreef op 04 juni 2004 @ 14:14:
probeer eens:

code:

border: 0; !important

maar nogmaals, het werkt bij iedereen behalve bij jou, misschien een gevalletje PEBKAC?

Ik heb een tijdje software getest omdat ik de meest vreemde fouten ontdekte, kan dus aan mij liggen ja, maar ik denk het niet; ik ben hier normaal prof. mee bezig, als in: ik verdien er bakken geld mee, wit...

Het weigerd pertinent om te werken tenzij ik de css classes die ik gebruik samenvoeg. en wegens tijdgebrek heb ik dit ook gedaan, dus heb ik twee extra classes gemaakt (CartInvInputaltColor1 en CartInvInputaltColor2)

letterlijk de code zoals hier op de website werkte thuis dus niet, en omdat ik het bij mij werkend wil hebben heb ik dus voor bovenstaande oplossing gekozen. Ik neem aan dat mensne in de toekomst dr niet veel aan hebben, maar t is een oplossing heh

[ Voor 13% gewijzigd door Verwijderd op 05-06-2004 16:36 ]

[Verwijderd]

Verwijderd schreef op 04 juni 2004 @ 09:19:
Ik zal het nog 1 keer proberen te verduidelijken wat mn code is, en ik moet er bij zeggen dat als ik de stylesheet in een bepaalde volgorde schrijf ik de randen wel weg kan houden (en dan bedoel ik niet de plaatsing, maar letterlijk welke eigenschap ik het eerste typ, waar dan ook in de stylesheet), maar zoiets is ronduit belachelijk, het zou gewoon altijd moeten werken....

CSS:

code:

.inputbasis
{
    font-family       : Comic Sans MS, Arial, sans-serif;
    background-color  : #F3F3FF;
    border-top        : 1px solid #DDDDDD;
    border-bottom     : 1px solid #F7F7FF;
}

.alternatief
{
    text-align        : right;
    border            : 0px;
}

HTML:

code:

<form name="testfrom">
    <input type="text" class="inputbasis alternatief" name="testinput">
</form>

Zoals je ziet moet hij eerst de eigenschappen van inputbasis nemen, en die overschrijven met eventuele aanpassingen in alternatief. Dit zou in theorie een lichtpaars editveld zonder randen op moeten leveren met Comic Sans MS als basisfont. in plaats daarvan levert het bij mij een paars editveld met de border-top en border bottom op. Dat is complete onzin, ik overschrijf de waardes voor de border toch naar 0. Volgens iedere reference die ik kan vinden mag dit en werkt dit. Bovendien pas ik het vaker toe waar zoiets dergelijks wel goed werkt...

Iemand nog ideeen?

Let ook even op de schrijf wijzen :

Wanneer je iets maakt met
InputBassis
Dat je het ook aan stuurt, die spatie met die andere naam, gaat problemen opleveren.
Wil je die alternate versie gebruiken, noem hem dan ook class="alternate"

Het punt is dat GeleRand
en GeleRand Alternate toch echt iets anders is

[Verwijderd]

Verwijderd schreef op 05 juni 2004 @ 20:04:
[...]


Let ook even op de schrijf wijzen :

Wanneer je iets maakt met
InputBassis
Dat je het ook aan stuurt, die spatie met die andere naam, gaat problemen opleveren.
Wil je die alternate versie gebruiken, noem hem dan ook class="alternate"

Het punt is dat GeleRand
en GeleRand Alternate toch echt iets anders is

Ik snapte echt niks van je post, maar een spatie in je classname mag. dwz het wordt geaccepteerd en goed weergegeven, met de eigenschappen van beide classes

edit:
ja, ondertussen snap ik de post wel, de zinnen waren me effe wat te lastig
Sorry

[ Voor 9% gewijzigd door Verwijderd op 05-06-2004 20:17 ]

[Verwijderd]

Lol

Ik bedoelde dus dat :

.GeleRand (en ) GeleRand Alternate twee veschillende dingen zijn

Mocht ik liegen . sorry daarvoor

Dan zijn we allebij een beetje in de bonen , jouw start post ging ook niet helemaal goed, vandaar dat ik even de kluts kwijt was.
Vermoedelijk vind ik hem ook nooit meer terug, maar dat terzijde

[ Voor 42% gewijzigd door Verwijderd op 05-06-2004 23:30 ]

[crisp]

RCA: je kan gewoon meerdere classes opgeven:

Cascading Stylesheet:

.class1 { color: yellow; }
.class2 { text-decoration: underline; }

HTML:

<span class="class1">gele text</span>
<span class="class2">onderstreepte text</span>
<span class="class1 class2">gele onderstreepte text</span>

[ Voor 4% gewijzigd door crisp op 05-06-2004 23:46 ]

[Verwijderd]

faabman schreef op 04 juni 2004 @ 00:03:

je mag wel underscores gebruiken...

Volgens de CSS 2 specificatie mag het niet, volgens 2.1 wel.

Dat maakt het dus onmiddellijk onverstandig om underscores te gebruiken.