10 replies [Last post]
rck
Offline
Enthusiast
Last seen: 15 years 42 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Hi! I figured out this forum via google and it looks like the right place to ask. Haven't found a answer via search, so please don't flame me, if it has been answered already a couple of times.

I figured out, the following css makes nice gradients over all input elements, with all the gui elements (borders, mouse over, etc.) kept intact:

input, select, option, file, textarea {
        color               : black;
        background-color    : #e6e6fb;
        border-width        : 1px;
        vertical-align      : middle;
        filter:progid:DXImageTransform.Microsoft.Gradient
                (GradientType=0,StartColorStr='#ffffffff',EndcolorStr='#aae6e6fb');
}

I also figured out, that the file upload isn't skinnable. This css works fine for internet explorer, but the filter stuff of course doesn't work for all the other browser. So I made a second css for the other browsers:

input, select, option, textarea {
        color               : black;
        background-color    : #e6e6fb;
        vertical-align      : middle;
        border-width        : 1px;
}

this of course looks very dull. the Opera default buttons, for example, look far superior to my css here.

So my question: What kind of css would I need to skin nice buttons, if possible the way the default buttons in Opera are, of course tinted with a specific color or the way I figured out for the input elements in Internet Explorer? Without specifying dozends of different css-files, if possible? Wink

I guess, a background image wouldn't really help me, as it doesn't scale. and even if it did: it wouldn't look as good on, say, textareas?

by the way, I found the Internet Explorer Code on http://www.webreference.com/programming/css_stylish/ and tweaked it, so the input elements would react "more natural".

thank you // René!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 32 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Gradient over Input Elements

You can't skin buttons using CSS, they're set by the browser.

Verschwindende wrote:
  • CSS doesn't make pies

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Gradient over Input Elements

thepineapplehead wrote:
You can't skin buttons using CSS, they're set by the browser.

lies, all lies Smile

You can skin any buttons (<button>, <input type="submit">, <input type="button">) apart from <input type="file">.

rck
Offline
Enthusiast
Last seen: 15 years 42 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Gradient over Input Elements

seb wrote:
You can skin any buttons (<button>, <input type="submit">, <input type="button">) apart from <input type="file">.

you don't happen to have any examples laying around somewhere? Wink

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 32 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Gradient over Input Elements

Sorry, for a moment there I thought you were talking about scrollbars.

You're absolutely right, it will only work in IE, and that IE filter code won't validate. If I were you I'd just stick with a nice colored button that matches your site, and forget all this filter and gradient stuff.

Verschwindende wrote:
  • CSS doesn't make pies

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Gradient over Input Elements

input.btn
{ border:1px solid #666;
background: #cfd;}

rck
Offline
Enthusiast
Last seen: 15 years 42 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Gradient over Input Elements

thepineapplehead wrote:
If I were you I'd just stick with a nice colored button that matches your site, and forget all this filter and gradient stuff.

Well, I've got my own Internet Explorer stylesheet, which is included on demand and already got the colored button stuff for other browsers which works well.

Is there any way on maybe giving them a background (where I could simply put a photoshop-made gradient?)? It's looking too nice to forget about it Smile

rck
Offline
Enthusiast
Last seen: 15 years 42 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Gradient over Input Elements

seb wrote:
input.btn
{ border:1px solid #666;
background: #cfd;}

thanks! I got:

input, select, option, textarea {
        color               : black;
        background-color    : #e6e6fb;
        vertical-align      : middle;
        border-width        : 1px;
}

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Gradient over Input Elements

I find that it's very rare that you want your input elements to have the same style as any buttons.

In firefox etc youc an get around this by specifying

input[type="submit"]

etc, but that doesn't work in IE so it's often necessary to affix a classname to your buttons.

Additionally you don't want to apply your rules to radio or checkbox buttons, I assign them a class="no" and then have a rule undoing the border and background-color.

rck
Offline
Enthusiast
Last seen: 15 years 42 weeks ago
Joined: 2004-09-26
Posts: 75
Points: 0

Gradient over Input Elements

seb wrote:
I find that it's very rare that you want your input elements to have the same style as any buttons.

well, by only defining "border-width" and not the whole border-style stuff, all the browsers do their widgeting by themselves. Buttons look the way the should, as well as text input fields and textareas.

I only tell the browser to make the borders 1px wide, etc., which works pretty well.

seb wrote:
Additionally you don't want to apply your rules to radio or checkbox buttons, I assign them a class="no" and then have a rule undoing the border and background-color.

that sounds cool, I guess I'll include that. how would I undo the border-color? is there a attribute like "border-color : forget it"? Smile

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Gradient over Input Elements

just set the width to 0.

Otherwise try transparent.