• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

Lose 3D Look on Text Fields in HTML

 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Is there any way to lose the 3D look of a Text Field in HTML:
<input type="text" name="textfield">
I know you can add a style="" attribute, but don't know if there are any styles that lose the 3D look and take it to a plain flat look.
Thanks.
 
Ranch Hand
Posts: 403
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Give this one a whirl:

Of, most likely not guaranteed to work on Netscape
 
Sheriff
Posts: 67597
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

A bit of a more terse example. Also works just fine in any modern version of Netscape.
hth,
bear
[ March 06, 2003: Message edited by: Bear Bibeault ]
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You guys are awesome. Thanks a bunch!!
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Does anyone have a good Web Reference for this kind of information? Something that gives a list of all the possible attributes and tags for CSS.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
a good link
http://www.w3schools.com/css/default.asp
Eric
 
Bear Bibeault
Sheriff
Posts: 67597
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I use the link Eric provided quite often; it's a great reference.
I also highly recommend this book to really understand the ins and outs of CSS.
hth,
bear
 
Ranch Hand
Posts: 66
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This works for an input field of type text and button. Is there a way to get the same "Flat" look for radio buttons, checkboxes and even selects (drop-down menus).
My forms include all of these and it looks bad having some flat while others are 3D.
Thanks
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Jason, I know the exact same code works for drop down lists. I haven't tried it for check boxed or radio buttons, but I would say just apply the style and see what it does.
 
Bear Bibeault
Sheriff
Posts: 67597
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Yeah, what Gregg said. Also bear in mind that, since the form controls are usually renderred by the browser using "heavy weight" platform-specific controls, your results will vary browser to browser, and even more platform to platform, so be sure to test your pages on all platform and browser combinations that are important to you.
I've found that radio buttons and check boxes seem to be the most badly behaved of the controls, right behind the file input widget which is a nightmare to try to render differently than the default.
Happy hunting!
bear
[ March 07, 2003: Message edited by: Bear Bibeault ]
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Drop Downs are sort of limited when it comes to CSS, esp. the difference between IE and Netscape.
Eric
 
Jason Brawner
Ranch Hand
Posts: 66
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hmmmmm...
I tried the style for drop downs but still got the 3D effect. I'll try again.
As for checkboxes and radio buttons, it puts a border around them (IE6). Looks really bad.
Thanks for the replies.
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic