Graphic as a form object

Freeway
1

How would I be able to control how text field’s corners looks like, it’s size, and what font is used to write in it?
Am I able to use an image as a popup Menu/List, having graphic as a checkbox, having a picture as a Submit button?

I actually saw this all done in Apple’s Mobile Me service, and I found it kinda cool! I’d really like to completely control my design of everything!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

You can control much of the look and feel of a form element using CSS. If you create a style called ‘textarea’ in the Styles palette, you can experiment with various properties there, and see the results in the Preview mode.

If you wanted to add rounded corners to the field, you could probably fake that using a background image, and a judicious use of padding to keep the text from running over in the corners.

You would need to use CSS to set the height and width of the textarea, just to make sure that it didn’t appear as a different dimension than your background image and spoil the look.

Also be sure to add a style to keep the blue focus ring from appearing in Safari when you click into the field:

textarea:focus { border:none; }

It’s easy to use an image as a Submit button in Freeway – there’s a little checkbox in the Inspector whenever you have an image selected which will let you do that.

As far as styling a select (picking list) there are quite a few things you can do using CSS on that front to set an image as the background of the element, but you can also get some nice effects by changing the border color, or the background color, or both. Safari in particular can do some very nice effects simply by changing the border color. But you can’t just make an image into a select without basically re-engineering the select element using JavaScript. It can be done, but it’s not for the faint of heart, and it might keep someone out of your site (which is just a quick way to get sued these days…).

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thank you so much! With some googling I finally found out how to set the “style:” of a form object.
I can’t believe how I could not have found out the graphic item “Sumbit” checkbox.

But do you know how to make graphic as a checkbox? I can see that Apple’s Mobile me uses JavaScript to handle that…
But is there any way for a guy knowing not so much JS to do this?

I still can’t see how I could be able to use popup menus as graphics.

Thank you though!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I’m not quite following you with the “textarea:focus” thingy…
Where is that supposed to go?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

That would be a separate style that you make. All it does is make sure that you don’t see a border around the textarea when it’s focused in Safari.

If you were hand-coding this, it would look like this:

textarea {
    background-image: url(path/to/picture.gif);
    width: 300px;
    height: 200px;
    border: none;
    padding: 12px 18px;
    margin: 0
}

textarea:focus {
    border: none;
}

As far as using a popup menu as graphics, if you mean using a graphic to style a popup menu, then it would be pretty simple:

select {
    background: url(path/to/graphic.gif);
    width: 100px;
    border: none;
}
select option {
    background: #ccc;
    border: none;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

Now that would make the select have a background image, so it could look like anything you like. It would still be a regular select, so it would work as a normal form element to choose from a list of options.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options