[CSS] Border rond textarea

[Verwijderd]

De layout van mijn formuliertje is kennelijk niet echt multi-browser.

Cascading Stylesheet:

INPUT { background-color: transparent; }
TEXTAREA { background-color: transparent; }

Je zou zeggen geen probleem.
Maar dan het resultaat in explorer en opera:


Internet Explorer 6: Merk op dat de rand van de input-velden en de textarea keurig gebeveld is.


Opera 7.03: De textarea heeft geen gebevelde rand meer, terwijl de input-velden die nog wel hebben. Kent iemand dit probleem en, nog liever, de oplossing?

Hoe kan dit? Het ligt kennelijk niet aan de css-interpretatie van opera, aangezien de INPUT properties wel goed worden weergegeven.

[gitaarwerk]

opera is echt met css ben ik ook achter gekomen.. zover ik weet is dit WEL de gare ondersteuning..

ik zou hier ook graag wat meer over willen weten.. (mijn buttons worden in opera niet goed)

[Willem]

Wat dat je van het element border:0; ?

[ Voor 4% gewijzigd door Willem op 11-04-2003 08:12 ]

[Woudloper]

Hmm, als je nou eens zegt in je CSS wat van type border je precies wilt hebben

Cascading Stylesheet:

textarea {
   border-style    : normal;
   background-color: transparent;
}

[BRAINLESS01]

Willem169 zei het al... maar de oplossing die ik zou proberen is:

code:

INPUT { border-width: 0px; }
TEXTAREA { border-width: 0px; }

die werkt in ieder geval wel in IE

[Verwijderd]

Gitaarwerk schreef op 11 April 2003 @ 01:52:
opera is echt met css ben ik ook achter gekomen.. zover ik weet is dit WEL de gare ondersteuning..

ik zou hier ook graag wat meer over willen weten.. (mijn buttons worden in opera niet goed)

ja dat heb ik ook dat mijn buttons niet goed worden weergegeven. Maar de layers die ik weleens in een pagina heb gezet werken ook niet goed.

[Willem]

Hm. Topicstarter heeft -lijkt me- zijn antwoord, zodat we dit topic verder niet laten verloederen door de problemen van anderen die van volstrekt andere aard zijn

[Willem]

Op verzoek van de topicstarter weer open, gaarne alleen op de inhoud van het probleem van de ts reageren.

[Verwijderd]

De 'border: 0' optie zorgt ervoor dat er ook in IE geen gebevelde rand omheen komt [zie screenshot 'Opera'] en de tip van Woudloper [border-style : normal] brengt ook geen soelaas.
Waar het mij dus om gaat is dat Opera er met 'input' kennelijk geen problemen mee heeft om de background transparant te maken, maar met een textfield gaat dezelfde property niet goed.

[ Voor 38% gewijzigd door Verwijderd op 11-04-2003 14:30 . Reden: reminder... ]

[RM-rf]

Gitaarwerk schreef op 11 April 2003 @ 01:52:
opera is echt met css ben ik ook achter gekomen.. zover ik weet is dit WEL de gare ondersteuning..

ik zou hier ook graag wat meer over willen weten.. (mijn buttons worden in opera niet goed)

er bestaat natuurlijk een (onwaarschijnlijke) mogelijkheid dat niet zozeer Opera fout zit dan, maar dat er dan wat aan je eigen kennis wbt CSS ontbreekt (Opera scoorde in de CSS-ondersteuning-test van Pieter Paul Koch beter dan Mozilla, msie blijft daar nog eens een straatlengte achter).

voor de TS, ik zie geen gedefinieerde border-width; dat zou betekenen dat je de rendering hiervan als keuze overlaat aan de UA, en deze mag kiezen hem al dan niet weer te geven.

wat gebeurt als je border: 1px inset; specificeert?

[Verwijderd]

RM-rf schreef op 11 april 2003 @ 14:27:
[...]

wat gebeurt [er] als je border: 1px inset; specificeert?

border: 2px inset; zorgt ervoor dat explorer het wel goed doet [maar die deed het al goed], opera geeft ook nu [net als bij border: 1px solid #000000;] een rechthoek eromheen als border ipv de gebevelde border die ik nu juist graag wil.

[BRAINLESS01]

Verwijderd schreef op 11 April 2003 @ 14:27:
De 'border: 0' optie zorgt ervoor dat er ook in IE geen gebevelde rand omheen komt [zie screenshot 'Opera'] en de tip van Woudloper [border-style : normal] brengt ook geen soelaas.
Waar het mij dus om gaat is dat Opera er met 'input' kennelijk geen problemen mee heeft om de background transparant te maken, maar met een textfield gaat dezelfde property niet goed.

Ik zal het wel verkeerd begrepen hebben... maar je wil toch dat de border verdwijnt..?

Als je per-se zo'n rand wil hebben(niet gebeveld), bijvoorbeeld links en boven, probeer dan eens:

code:

INPUT {
 border-top: 1px solid #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 1px solid #FFFFFF;
}
TEXTAREA {
 border-top: 1px solid #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 1px solid #FFFFFF;
}

volgens mij kan je ook een bevel maken hiermee, door 'solid' te veranderen in iets anders (moet je even googlen naar CSS border attributes)

als dit het niet is leg dan even uit wat je wel precies wil hebben....

[BRAINLESS01]

zoals iemand dus al zei, blijkbaar is het 'inset'

_BRAINLESS schreef op 11 April 2003 @ 14:36:

code:

INPUT {
 border-top: 2px inset #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 2px inset #FFFFFF;
}
TEXTAREA {
 border-top: 2px inset #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 2px inset #FFFFFF;}

[Verwijderd]

_BRAINLESS schreef op 11 April 2003 @ 14:36:
[...]


Ik zal het wel verkeerd begrepen hebben... maar je wil toch dat de border verdwijnt..?

Nee, ik wil juist *wel* een border, zo'n mooie gebevelde als ie er van maakt

Als je per-se zo'n rand wil hebben(niet gebeveld), bijvoorbeeld links en boven, probeer dan eens:

code:

INPUT {
 border-top: 1px solid #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 1px solid #FFFFFF;
}
TEXTAREA {
 border-top: 1px solid #FFFFFF;
 border-right: 0px solid #FFFFFF;
 border-bottom: 0px solid #FFFFFF;
 border-left: 1px solid #FFFFFF;
}

Dit is dus *bijna* wat ik wil. Misschien als ik wat ga kloten met de colors voor de border-top en de border-left, dus een mooie grijstint, dat het verschiul met een standaard bevel niet te zien is.

Bedankt!

[BRAINLESS01]

je kunt ook nog proberen om met:

code:

border-color-dark: grey;
border-color-light: light-grey;

te werken... maar dan moet je weer even googlen want ik weet niet zeker of die kleuren gebruikt mogen worden en of 'border-color-dark/light' bestaat (misschien heten ze anders, ze bestaan zeker, maar ik weet dus niet hoe)

[BRAINLESS01]

overigens is er ook:

code:

border-top-style: inset;
border-top-width: 2px;

dan hoef je niet de kleur aan te passen en blijft hij (als het goed is) wel gewoon normaal

dit kan natuurlijk voor top, right, bottom en left

edit:
typo

[ Voor 5% gewijzigd door BRAINLESS01 op 11-04-2003 14:55 ]

[Verwijderd]

_BRAINLESS schreef op 11 april 2003 @ 14:54:
overigens is er ook:

code:

border-top-style: inset;
border-top-width: 2px;

dan hoef je niet de kleur aan te passen en blijft hij (als het goed is) wel gewoon normaal

Dit werkt inderdaad ook, zij het alleen in IE. Dus blijft het eigenlijke probleem bestaan: ik krijg Opera niet zover om de standaard bevel-border om een textfield heen te krijgen. Maar Brainless, heel erg bedankt voor de moeite so far, ik denk dat ik er wel gedeeltelijk uitkom. Beter een niet-gebevelde grijze border dan zo'n zwarte border rondom of helemaal geen border.

[RM-rf]

Volgens mij kun je de border-color: #CCC specificeren om een mooie inset te krijgen, zonder gedefinieerde color maakt Opera hem zwart, wat een weinig interessante inset oplevert.

ik vermoed dat Opera per default de kleur definieert adhv de background-color van de textarea en de standaard color; enkel heeft hij problemen met de background-color transparent om dan de border-color te definieren

[Verwijderd]

RM-rf schreef op 11 april 2003 @ 15:08:
Volgens mij kun je de border-color: #CCC specificeren om een mooie inset te krijgen, zonder gedefinieerde color maakt Opera hem zwart, wat een weinig interessante inset oplevert.

Dat werk niet echt, zelfs IE snapt het nu niet meer en haalt de border gewoon weg.

ik vermoed dat Opera per default de kleur definieert adhv de background-color van de textarea en de standaard color; enkel heeft hij problemen met de background-color transparent om dan de border-color te definieren

Ik denk idd dat dat het probleem zo ongeveer is. De problemen met Opera beginnen zodra de background van de textarea transparant wordt.
Na ja, ik hou het er maar gewoon bij, heb het nu, dankzij al jullie tips, voor elkaar dat IE het formulier gewoon laat zien zoals ik dat wil, en die schoonheidsfoutjes in Opera [top en left een zwarte rand ipv een mooie grijze bevel] neem ik dan maar voor lief.

[ Voor 1% gewijzigd door Verwijderd op 11-04-2003 15:51 . Reden: typo ]