[CSS] Round corners in form elementen

[Stalkert]

Ik zoek een oplossing om rounded corners te krijgen in form elementen zoals textareas en input. Nu heb ik een oplossing gemaakt waarbij ik gewoon een bg image opgeef waarin de corners verwerkt zijn, echter het probleem is dat nu voor elke breedte input-element een aparte background image moet maken. Ik zoek dus een dynamische oplossing (liefst puur CSS) waar ik dit mee voor elkaar krijg?

[disjfa]

Spannetje om een input element? 2 achtergronden.

[ Voor 6% gewijzigd door disjfa op 26-09-2008 11:46 ]

[Stalkert]

Spannetje om een input-element, mag dat dan? Kun je iets duidelijker zijn

[semicon]

ja moet zo ie zo met een ander element erbij gaan werken om dit voor elkaar te krijgen... een span is misschien niet de meest mooie oplossing (ik heb me er niet inverdiept ), mij dat werkt in ieder geval.

JE geeft dan een background aan de input (naar rechts als afronding) en in het element doe je hem links met een kleine margin (de margin van de afronding).

[CH4OS]

Je kan natuurlijk ook je form keihard van een height en width voorzien.
Dan moet het wel mogelijk zijn om op <form> een background-image te gooien...
Met padding kan je dan wel de onderdelen van het formulier op zijn plek zetten...

Als je gaat [google=rounded corners form] kom je vast ook wel een heel eind...
Dan kom je bijvoorbeeld op Fun with forms uit...

Snap niet waarom er een span element nodig is, de elementen voor formulieren zijn ook gewoon te stijlen hoor
Zij het soms wat beperkt...

offtopic:
Angelo! :W

[ Voor 22% gewijzigd door CH4OS op 26-09-2008 13:01 ]

[Morrar]

@GJtje: die fun with forms link laat een voorbeeld zien met elementen met een vaste grootte... Volgens mij wil de TS juist dat de elementen variabel in grootte kunnen zijn, zonder dat hij/zij iedere keer nieuwe background plaatjes moet maken.

Volgens mij is dit dus meer wat de TS zoekt : http://bathew.com/playhouse/rounded-corner-form-elements/ ?
Zit je dus inderdaad met andere elementen om het invoerelement heen te knutselen, maar dat lijkt me niet zo'n groot bezwaar.

[CH4OS]

Morrar schreef op vrijdag 26 september 2008 @ 13:35:
@GJtje: die fun with forms link laat een voorbeeld zien met elementen met een vaste grootte... Volgens mij wil de TS juist dat de elementen variabel in grootte kunnen zijn, zonder dat hij/zij iedere keer nieuwe background plaatjes moet maken.

En background: transparant; op alle input elementen heeft niet geholpen? Nou lijkt het me niet bepaald wenselijk dat je een input element dezelfde achtergrond wil geven als wat je op de achtergrond hebt, hierdoor word het formulier naar mijn mening moeilijker te lezen; is het dus een groot probleem als die input elementen géén background heeft?

[Johnny]

Dit werkt uitstekend in Gecko en Webkit browsers zoals Firefox, Camino, Safari, Chrome. Browsers zoals Opera en Internet Explorer negeren het en laten gewoon rechte hoeken zien:

Cascading Stylesheet:

textarea,
select,
input[type=text] {
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

[CH4OS]

Johnny schreef op zaterdag 27 september 2008 @ 13:19:
Dit werkt uitstekend in Gecko en Webkit browsers zoals Firefox, Camino, Safari, Chrome. Browsers zoals Opera en Internet Explorer negeren het en laten gewoon rechte hoeken zien:

Cascading Stylesheet:

textarea,
select,
input[type=text] {
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

Maar dat is CSS3(?) die nog niet volledig ondersteund word door álle browsers... Dan is het ook niet zo verwonderlijk dat het niet werkt in IE, dacht dat Opera wat meer bij de tijd is, aangezien zij ook de Gecko engine gebruiken tegenwoordig...

[Harm]

GJtje schreef op zaterdag 27 september 2008 @ 13:50:
[...]
Maar dat is CSS3(?) die nog niet volledig ondersteund word door álle browsers... Dan is het ook niet zo verwonderlijk dat het niet werkt in IE, dacht dat Opera wat meer bij de tijd is, aangezien zij ook de Gecko engine gebruiken tegenwoordig...

Nee, dat is echt onzin: Opera gebruikt nog steeds Presto als renderengine.

[Johnny]

GJtje schreef op zaterdag 27 september 2008 @ 13:50:
[...]
Maar dat is CSS3(?) die nog niet volledig ondersteund word door álle browsers... Dan is het ook niet zo verwonderlijk dat het niet werkt in IE, dacht dat Opera wat meer bij de tijd is, aangezien zij ook de Gecko engine gebruiken tegenwoordig...

Dat staat er ook boven. Het gaat hier om zoiets triviaals als ronde hoekjes voor formulieren, die zien er toch op ieder systeem anders uit.

Opera gebruikt gewoon hun eigen engine genaamd Presto en is over het algemeen niet zo snel met het implementeren van standaarden die nog niet volledig zijn uitgewerkt, Webkit en Gecko hebben vaker experimentele features die (nog) geen echte standaard zijn.