Category: 3rd Party Software
Link: Prettier form controls for Firefox on Macs
Posted on MacBytes.com
Approved by Mudbug
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Prettier form controls for Firefox on Macs
- Thread starter MacBytes
- Start date
- Sort by reaction score
Category: 3rd Party Software
Link: Prettier form controls for Firefox on Macs
Posted on MacBytes.com
Approved by Mudbug
I wondered why the form elements look better in the "special edition" Firefox for G5 optimized build, they must have included this in it 
I love Firefox.
I love Firefox.
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
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
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
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
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
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
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?
Other than an <input> text field there's no custom faced buttons or any other custom fields that I can see there2GMario said:
edesignuk said:Other than an <input> text field there's no custom faced buttons or any other custom fields that I can see there
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).bertagert said:
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
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
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.edesignuk said:
Go to google.com and start searching. You'll have all the answers you need in a few minuutes.
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.bertagert said:
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 said:
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
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
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
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
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).
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
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