Prettier form controls for Firefox on Macs

[MacBytes]

Category: 3rd Party Software
Link: Prettier form controls for Firefox on Macs (http://www.macbytes.com/link.php?sid=20041115102519)
Posted on MacBytes.com (http://www.macbytes.com)

Approved by Mudbug

[edesignuk]

I wondered why the form elements look better in the "special edition" Firefox for G5 (http://forums.macrumors.com/showthread.php?t=97289) optimized build, they must have included this in it :cool:

I love Firefox.

[2GMario]

im not to sure how this is relevant. form controls can be controlled via CSS

we do it on all of our sites.

and why would you want them to look prettier against what the site has designed ? the design we choose for our form controls via CSS are designs that fit in with the rest of the site. things like color, control border thinkness, flat, 3d, etc... are all part of layout design

this is like being able to adjust the size of text on a web page after the page has rendered. its fine if your eyes are bad and need bigger text to read it, but the web developers chose that size text cause thats what goes with the site. not cause they just happened to like 10 or 12 point fonts.

just a view.

-Mario

[edesignuk]

AFAIK form elements cannot be controlled via css in Firefox, or Safari for that matter.

[bertagert]

AFAIK form elements cannot be controlled via css in Firefox, or Safari for that matter.
Yeah they can.

[edesignuk]

Yeah they can.
I'll just shut up then :o Link to an example?

[2GMario]

you may wanna brush up on your CSS a little edesignuk, you would be surprised what CSS can control

mind you, IE doesnt support some tags, but CSS can do everything from onfocus to simple IF statements (firefox supports on focus of textbox while IE doesnt, inwhich case you would check the browser version and implement javascript for onfocus where IE doesnt support it from CSS)

i have had a hard time controlling form elements in safari, but i havent spent much time with safari as my primary concern. we dev primarily for firefox, then for IE and check to make sure stuff works in safari. thats just the way we have prioritized the browsers

il stop here as to not turn this into a flame war, but theres quite a few books on CSS if your a bit behind times. you should also know theres different CSS versions.

-Mario

[2GMario]

http://www.coredatasolutions.net/index1.php

is a example of on focus, with css controlled text boxes working in firefox

please keep in mind, this is a mockup - not functional yet / final layout.

the current production version is at http://www.coredatasolutions.net

oh yeah, i own this company :)

-Mario

[edesignuk]

I have just never noticed "custom" form elements when browsing with Firefox or Safari, I could be (and by the sounds of it I am) wrong, but I'd still just like to see a link to an example?

[edesignuk]

http://www.coredatasolutions.net/index1.php
Other than an <input> text field there's no custom faced buttons or any other custom fields that I can see there :confused:

[bertagert]

Other than an <input> text field there's no custom faced buttons or any other custom fields that I can see there :confused:

Go here
http://www.outfront.net/tutorials_02/adv_tech/funkyforms2.htm

Scroll down to see some examples, then click on the link on the bottom to see more examples (Part IV, V, etc.). This should help you out.

[edesignuk]

Go here
http://www.outfront.net/tutorials_02/adv_tech/funkyforms2.htm

Scroll down to see some examples, then click on the link on the bottom to see more examples (Part IV, V, etc.). This should help you out.Button faces don't change in either Firefox or Safari, and in safari the input field backgrounds aren't even what is set (which does work in Firefox).

[2GMario]

http://www.coredatasolutions.net/includes/buttontest.php

apparently, and i have tested this, the G5 optimized version of firefox must have that pretty button thing compiled into it

the css
.TestButton {
border-left: 1px dotted #575757;
border-width: thick;
background-color: #f47272;
color: #575757 font: 14px Lucida Grande, Helvetica, sans-serif;
}

i tested that same page on firefox rc1 that i have on my ibook and the button is exactly as it reads, thick border with the left border being dotted and the background a pall red

edit: safari on my ibook produces those same results, while safari on my G5 doesnt

test machines:
ibook g4
800mhz
640mb ram, 30gb hard drive
panther 10.3.6

G5
dual 1.8ghz
2gb ram - dual 250gb hard drives
panther 10.3.6 Server

interestingly enough, maybe its server (for some reason) not allowing the css, but i highly doubt it

odd either way

-Mario

[bertagert]

Button faces don't change in either Firefox or Safari, and in safari the input field backgrounds aren't even what is set (which does work in Firefox).
Ok, I don't want to spend too much time on this but let me help you out as much as I can. If you are looking to do web site design with CSS you should really get a book. It will be a great reference when coding. With that said, you also need to do a lot of research on how CSS works with each browser. If you look at the examples I just linked to, you'll see that some of it works in NN/Firefox, some work in IE, some in both. As for Safari, you'll have to do some research to find out more. Personally, I don't code for safari. I go Firefox -> IE. That way everyone can see what I want them to see.

Go to google.com and start searching. You'll have all the answers you need in a few minuutes.

[edesignuk]

Ok, I don't want to spend too much time on this but let me help you out as much as I can. If you are looking to do web site design with CSS you should really get a book.
I don't remember saying I wanted to learn CSS, I am just querying how much Firefox (and Safari) form fields can be changed by CSS as I can't recall ever seeing a button face, for example, looking anything other than standard.

[edesignuk]

http://www.coredatasolutions.net/includes/buttontest.php

apparently, and i have tested this, the G5 optimized version of firefox must have that pretty button thing compiled into it

the css
.TestButton {
border-left: 1px dotted #575757;
border-width: thick;
background-color: #f47272;
color: #575757 font: 14px Lucida Grande, Helvetica, sans-serif;
}
Also you have <button>'s, not strictly form fields, a form button should be <input type="button">, not sure what difference this would make.

[2GMario]

sorry hun, wrong again

in firefox and IE <input type="submit"> can both submit the form

but, in my testing, only in IE (have not tested in safari ) <button>button name </button> can not submit the form. firefox can cause a form submit with <button>

that is in IE, without javascript can a <button> not submit a form

it is extreamly important, with css, html, etc... to know what browser your developing for because many things do not work across all browsers. we can thank MS for this, which is why we dev for firefox first, then IE.

-Mario

[2GMario]

http://www.coredatasolutions.net/includes/buttontest.php

for the sake of arguement, the same page, this time with

<button>button test, no css</button>
<button class="TestButton" >button test, css</button><br>
<input type="submit" value="submit test, no css">
<input type="submit" class="TestButton" value="submit test, no css">

same results, button or submit

-Mario

[edesignuk]

sorry hun, wrong again"hun"?

I'm a dude, dude!

[2GMario]

haha, sorry, the picture must have thrown me off

[kustere]

Yes you can control the form look and feel by using CSS, which works in most browsers. This hack is to change the look and feel for all those sites that don't use CSS to make the form fields look better, also CSS can not change the look and feel of radio and checkboxes, they pretty much can only change text boxes or controls that contains text box components (eg drop down lists).

[fowler.]

I'm seriously ignorant to all of this, but is there anyway that I can change the size of the typeface in the address bar to something smaller, say a 10pt verdana, rather than this hugemongous 12pt lucinda boo shiet?

/run on sentence.

[2GMario]

in windows (everything since 95) right click the desktop / properties / its in one of the display panels

and it wont say the address bar specifically. ul have to change the font size of a generic text box to change the address bar probably

in OS X.... the closest thing would be system preferences / apparence BUT in this respect we dont have as much control as in windows.

maybe shapeshifter can pull it off, but i like the settings os x comes with. probably could copy the aqua theme and change few specifics.

other than that, i dont think its possible. a rule about OS X is to follow the aqua layout as close as possible to have a consistent user experience.

-Mario