Text Fields
Posted by Adele Peterson on Thursday, March 30th, 2006 at 11:37 pmWe have recently switched over to use an engine-based implementation for <input type=text>. In doing so, our text fields are now able to use many useful css capabilities that weren’t available before. Border-radius, border-image, and background-image are just a few that will now work with our text fields.
The implementation details are similar to the details of the button implementation. We use “-khtml-appearance: textfield” to turn on the aqua text field border. When border styling is specified, we turn off the aqua appearance. For the editable part of the field, we use an anonymous contenteditable div. This means that we’re using the same editing engine for our text fields that we use for Mail and any other editable web content.
Also, initial measurements indicate a significant speedup in load performance for pages containing text fields. Bring on those text field heavy pages!
Here’s a screenshot to show some of the cool things that will now work with our text fields.
Sample code for these examples can be found on the wiki.
March 31st, 2006 at 1:24 am
Cool stuff Adele! Nice work, now let’s find some bugs
March 31st, 2006 at 3:20 am
Are these new TextFields going to still support all the things NSTextView widgets do? I’ve got some input managers that are mighty useful.
March 31st, 2006 at 4:32 am
Yes, input managers will still work (just as they do in editable html areas). As will other NSTextView features (although some may be missing right now).
March 31st, 2006 at 4:58 am
Cool, any idea when we can expect to see these in a release of Safari?
March 31st, 2006 at 8:05 am
[...] icker Developments. Over at the Surfin’ Safari blog Adele posted this little bit about CSS format-able text fields in Safari. Let’s only hope these changes make it [...]
March 31st, 2006 at 8:27 am
[...] system. Also includes links to sample code for some pretty whiz-bang looking text fields. Link. This link was tagged Geeky, Web. [...]
March 31st, 2006 at 9:20 am
sweet!
March 31st, 2006 at 12:36 pm
[...] ks like Safari is using it’s own implementation of text fields now as opposed to embedding standard ones. The result is pretty impres [...]
April 1st, 2006 at 6:00 am
Safariko inprimakien itxura aldatu ahalko da CSSa erabiliz
Safari nabigatzailean inprimakien itxura aldatzea ezinezkoa zen lehen. Estilo orrietan edozer jarrita ere, inprimakiek berdin jarraitzen zuten. Orain, "Surfin’ Safari"n idatzi dutenez, CSS bidez estilo aldaketak egiteko aukera eskainiko dute…
April 1st, 2006 at 7:22 am
[...]
CSS-styling coming to Safari text fields
Tags: css, forms, safari.
The Safari/Webkit Surfin’ Safari weblog announces that CSS style-able text input fields are coming to S [...]
April 1st, 2006 at 9:34 am
This looks very cool and would help to make my company’s webapplication look very sharp, but am I mistaken in thinking that this still doesn’t give us the rich text editable text field so desperately needed by most web-apps??
Bert
April 1st, 2006 at 5:06 pm
Bert, Safari already supports “contentEditable” for rich editable text areas. There are bugs but we are working on fixing them!
April 2nd, 2006 at 2:32 am
[...] y Gabri on the Aprile 1st, 2006 Cose belle queste.. Gli sviluppatori del Webkit hanno annunciato il supporto a nuovi attributi per le input di testo nelle prossime versioni di Safari. Pensare [...]
April 2nd, 2006 at 3:57 am
@maciej
Thank you very much for the response.
If that contentEditable is a standard (or at least fully supported by Firefox on PCs), then I’d be willing to fork out $250 for the person/people/organisation that makes this work flawlessly in the next release of Safari. We really need it. This pledge does require some correspondence.
Bert
April 3rd, 2006 at 1:46 am
Bert, it’s supported by IE on PCs. Firefox has a different model for editing, designMode, although it might be adding contentEditable as well. There’s no need to pay anyone to make it work well, it’s being done. The best way to help is to file bugs.
April 3rd, 2006 at 3:51 am
[...] ed @ 11:50 am
Ma invece di pensare a risolvere le grane con JAVA!!!! SGRUNT. Surfin’ Safari.
Leave a | Post to Del.icio.us | Technorati Cosmos
Co [...]
April 3rd, 2006 at 3:14 pm
I would be curious to see how these examples look under the hood. Is the source for that example screenshot available somewhere or could it be made available? Thanks!
April 3rd, 2006 at 3:16 pm
Erm, strike that. I must have been blind to miss the last sentence of the article.
April 3rd, 2006 at 3:37 pm
Regarding contentEditable: There are some HTML editors that have worked around whatever bugs there are in Safari and work quite nicely. Try these: http://www.qwebeditor.com/ http://editor.asbrusoft.com/
Unfortunately FCKeditor Mac development seems to have ground to a halt.
April 3rd, 2006 at 5:32 pm
[...] « Behavior Stylable Text Fields in WebKit. Safari, which for eons has had the least-customizable form controls among [...]
April 4th, 2006 at 6:24 pm
anyone else find that typing in the new text field is very slow / lagging ? Try to type something in the login box of your gmail / hotmail / yahoo, etc. I’m running 10.4.6 latest nightly webkit (PPC).
April 7th, 2006 at 9:32 pm
Is there any way to get the Generic apple text field’s fake inner shadow to actually have a transparent shadow? It looks pretty bad when the has a background color.
April 11th, 2006 at 5:40 am
Hmm..can’t seem to make this work with the form fields on my site.although -moz-style radius works for FFox — anyone care to take a look to see why? http://informationgift.com/
Using the first example off the wiki, I see that minor radius value changes will cause the field to drop back to square corners; for instance, if I change radius to 30px.
April 12th, 2006 at 12:35 pm
One thing I do want to ask about all of this is if it is going to support the SELECT tags as well? Sorry, I haven’t downloaded the latest WebKit yet, so I don’t know.
April 14th, 2006 at 1:19 am
CSS style and Safari textfields
Up until now safari hasn’t allowed much visual control of textfields via CSS, unlike, for example, Firefox. It’s possible to argue that this is a good thing, with aqua-style input elements providing consistency across websites: when developers can on…
April 29th, 2006 at 6:36 pm
[...] similar device, rather than simply reformatting all of our content.” [Via Stylegala] Text Fields The latest builds of WebKit means you can style text fields. [Via Stylegala] Mobile Device UI [...]
June 12th, 2006 at 10:51 am
Formatowanie formularzy w Safari
Kilka dni temu we wpisie Firefox 1.5.0.4 z aqua form widgets wspomniałem, że Safari nie reaguje na CSS-y formatujące pola formularzy.
Co prawda najnowsza stabilna wersja Safari faktycznie nie reaguje na background:transparent i wyświetla, podobnie …
April 30th, 2007 at 1:03 pm
With the shutdown of OpenDarwin, any chance you’ll be posting the source code of these elsewhere?
May 31st, 2007 at 5:04 am
[...] macht uns das Safari-Team das Leben noch ein Stück schwerer. Wenn du ihren Artikel zu „Textfeldern“ gelesen hast, siehst du, dass Safari es bald möglich machen wird alle Arten von Dingen zu [...]
October 31st, 2007 at 5:42 pm
@phej (and anyone else interested)
You can still get the source from the wayback machine…
http://web.archive.org/web/20060823195257/http://wiki.opendarwin.org/index.php/WebKit:Sample_Code:Cool_text_fields
November 15th, 2007 at 4:32 am
[...] some older, more advanced examples for styleable text fields. On other sites, you can find demo pages for styling all sorts of form [...]