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.

Re: Easy CSS Flatness Code

nice; making note of this for future use

3

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

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)

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

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."

7

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.

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.