• From: zCOM
  • Registered: 2005-01-16
  • Posts: 433

Topic: Easy CSS Flatness Code

Ok...I didn't think this was supposed to go in any of the other forums, so I put it here.

It's not a full mod or anything. It's not even fancy.
It's just a simple little mod to pritty things up.


What this does is causes all text-boxes, input boxes, and buttons to become flat - all instead of having that annoying beveled look.


Add this line to all your CSS templates in the section "4"

/* 4.5 Flat Boxes and buttons provided by Eris Siva */
.pun INPUT, .pun SELECT, .pun TEXTAREA {
     border: solid 1px
}

I just think it looks more professional.

For a demo, click here.
The demo is just to show what the buttons and inputs look like.

[img]http://www.dreamhost.com/images/rewards/80x15-a.gif[/img]
[img]http://img303.imageshack.us/img303/6118/getfox6mr.gif[/img]

erissiva's Website

  • Registered: 2005-02-26
  • Posts: 26

Re: Easy CSS Flatness Code

nice; making note of this for future use

alicson's Website

3 Reply by gezz

  • gezz
  • Senior Member
  • Offline
  • From: Canada (eh?)
  • Registered: 2004-04-16
  • Posts: 142

Re: Easy CSS Flatness Code

thats actually quite handy man, thanks for reminding me...

i had this done on my page and not on the forums...

-gezz
  • Frank H
  • Former PunBB Developer
  • Offline
  • Registered: 2003-03-16
  • Posts: 1,423

Re: Easy CSS Flatness Code

hmm, all the dropdowns aren't flat in Firefox, so you just got some inconsistency

(and IMO inconsistency doesn't look professional wink)

  • CodeXP
  • Senior Member
  • Offline
  • From: /dev/null
  • Registered: 2004-07-07
  • Posts: 503

Re: Easy CSS Flatness Code

Frank H wrote:

hmm, all the dropdowns aren't flat in Firefox, so you just got some inconsistency

(and IMO inconsistency doesn't look professional wink)

input,submit,textarea {border: 1px solid #ACA899}

This however, is consistant smile

CodeXP's Website

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Easy CSS Flatness Code

Now show me how to style the file upload dialogue smile

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

7 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Easy CSS Flatness Code

And the selects just show the default style in IE. Thats why I left form controls alone. Inconsistency doesn't look good. If you can't make the selects the same style as the inputs then best not to bother.

  • From: zCOM
  • Registered: 2005-01-16
  • Posts: 433

Re: Easy CSS Flatness Code

Paul wrote:

And the selects just show the default style in IE. Thats why I left form controls alone. Inconsistency doesn't look good. If you can't make the selects the same style as the inputs then best not to bother.

As far as I found, there is no way to style the border of check-boxes and dropdowns with css. You can modify dropdowns many other ways, including transparecny - but you can fix the border issue.

Rickard - Which file upload dialogue? O_O

Paul - My site's not exactly IE friendly...but then again, I guess standards just are Microsoft's "thing". Most of that stuff defaults in IE, anyways. Kind of like radio buttons and the such. They always default to your systems thing - even in FF.

[img]http://www.dreamhost.com/images/rewards/80x15-a.gif[/img]
[img]http://img303.imageshack.us/img303/6118/getfox6mr.gif[/img]

erissiva's Website