[forms] flat style

[Dries Arnolds]

Ik zie wel eens forms die niet van die standaard invoervakjes hebben, maar gewoon een zwart lijntje erom en geen 3d-effecten. Zoiets kun je veel beter aanpassen aan je design. Ik kan er zo snel geen vinden dus ik heb geen source code, maar hoe doe je zoiets?

p.s. het was niet in flash hoor.

[RM-rf]

code:

<style type="text/css">
INPUT {
   border-width: 35px;
   border-color: purple;
   border-style; solid;
}
</style>

eventueel kun je ook de shorthand

code:

border: solid 1px purple;

gebruiken

de 3d formelementen hebben standaard een border-style van inline, overigens is dat wel zo duidelijk voor de gebruiker dat het om input-elementen gaat.
als het enkel vanwege designer-geilheid s dat je solid borders wilt, dan moet ik je wel teleurstellen, dat wordt al vaak door van die design-sites toegepast en is niet echt origineel

pas tevens op met netscape 4x, dankzij een flinke bug worden je inputs onbruikbaar en valt de border op een verkeerde plek.
zorg dus dat die stijl voor netscap4x verstopt wordt, maar niet voor mozilla, die doet css1 alswel een groot deel van css2 perfect

[Dries Arnolds]

Het gaat om een site voor ervaren internetgebruikers, dus de duidelijkheid is niet in geding.\

Maar een browsercheckje is idd handig. Ik had al het idee dat het iets met CSS moest zijn.

[Verwijderd]

Voor dat probleem van NS heeft Pelle een keer een oplossing gepost.

twas zo iets:

code:

<style type="text/css">
<!--
    @import jecss.css;
-->
</style>

Import kent netscape niet, en duz leest ie er overheen (doet er niks mee) IE kent het wel en geeft je input dingen wel die style mee.

[Dries Arnolds]

Dat zou inderdaad wel handig zijn i.p.v. een hele browsercheck. Maar herkent Netscape6/Mozilla import wel? Want ander laat ik die de andere variant zien, terwijl ze de flat style forms wel aankunnen.

[Verwijderd]

Ik weet niet wat ns6 en mozilla ermee doen, zou je ff moeten testen. Ik heb geen van beide op mijn computer staan

[Hangloozz]

jurriaan heeft ooit eens een mooie opsomming van mogelijkheden gegeven.

[Verwijderd]

DasH: Herkent Netscape6/Mozilla import wel?

Staat het in de specs? Ja? Dan kent Mozilla het dus.

[RM-rf]

Op donderdag 11 oktober 2001 23:35 schreef DasH het volgende:
Dat zou inderdaad wel handig zijn i.p.v. een hele browsercheck. Maar herkent Netscape6/Mozilla import wel? Want ander laat ik die de andere variant zien, terwijl ze de flat style forms wel aankunnen.

import herkent mozilla uitstekend, bijvoorbeeld beter dan msie, inclusief media (mogelijk te gebruiken voor een css-browsercheck, door media="print" te definieren negeert mozilla het voor schermweergave)

mn twijfel was eerder of die rot-border-bug er nog inzat:
richinstyle leek dat te bevestigen:

Bug 6: borders destroyed on INPUT type="password", type="text" and TEXTAREA

Mozilla destroys borders on INPUT type="password", type="text" and TEXTAREA, destroying these controls when it is used. There is a demonstration in one of RichInStyle.com's bug pages.

http://www.richinstyle.com/bugs/mozilla.html
die bug page geeft overigens een 404, richinstyle doet ook niet alles goed, (maar wel veel, goede site)

echter hier lijken ze de 'quirk'-mode te bedoelen; als je echter zorgd dat je pagina goed valideert lijkt mozilla dit uitstekend uit te voeren, enkel is er nog wel een bugje als je een single-line input 100px brede border geeft, dan kan je niet meet invoeren,
maar ik geloof dat er weinig designers dat een goede truc vinden om hun design op te kalefateren, (alhoewel die jongens altijd klagen over netscape )