using css to change <select> button face and arrow color


A

acorn

Hello,

I have read MANY posts reagarding the use of css to modify form
elements. I understand the pros and cons regarding browser as well as
OS compatibility. I need to make the <select> element arrow - and the
button face behind the arrow - a different color for a site that is
requiring the user to run IE only. Anyone know if this is possible
using IE?

I have been able to use the following code below to change the text and
background of the <select> element, however the "arrow-color:#ffffff"
does not work. And I haven't found anywhere the code to change the
button face behind the arrow.

select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-color: #9c9a9c;
text-decoration: blink;
arrow-color: #ffffff;
}

Thanks,
Aaron
 
Ad

Advertisements

J

Jukka K. Korpela

acorn said:
I have read MANY posts reagarding the use of css to modify form
elements. I understand the pros and cons regarding browser as well
as OS compatibility.
Really?

I need

This contradicts with your previous statement. CSS is for optional
presentational suggestions.
to make the <select> element arrow -
and the button face behind the arrow - a different color for a site
that is requiring the user to run IE only.

Whatever it requires cannot be guaranteed, but people who try to do
such foolish things probably manage to discriminate against IE 7, for
example.
Anyone know if this is
possible using IE?
No.

I have been able to use the following code below to change the text
and background of the <select> element, however the
"arrow-color:#ffffff" does not work. And I haven't found anywhere
the code to change the button face behind the arrow.

select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-color: #9c9a9c;
text-decoration: blink;
arrow-color: #ffffff;
}

What made you think arrow-color would work? It sounds you started
inventing properties and expected browsers to read your mind.
If that's the approach, why not simply use
dwim: now !important;
or something like that? :)

Seriously, the place to start with IE-specific tuning is the Microsoft
documentation:
http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
Look at the properties with names starting with scrollbar-...

Specifically, you'll find that there _is_ scrollbar-arrow-color and it
does _not_ work for select (though it works e.g. for textarea).

You could simulate a <select> element using a scrollable <div> element
that contains a set of radio buttons, though the appearance would be
different of course.

BTW, e.g. setting font-size: 10px shows that you have _not_ understood
the pros and cons of messing around with form fields and other
elements.

The text-decoration: blink part was an attempt at a joke, right?
 
I

IEDesigner

acorn said:
Hello,

I have read MANY posts reagarding the use of css to modify form
elements. I understand the pros and cons regarding browser as well as
OS compatibility. I need to make the <select> element arrow - and the
button face behind the arrow - a different color for a site that is
requiring the user to run IE only. Anyone know if this is possible
using IE?

I have been able to use the following code below to change the text and
background of the <select> element, however the "arrow-color:#ffffff"
does not work. And I haven't found anywhere the code to change the
button face behind the arrow.

select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-color: #9c9a9c;
text-decoration: blink;
arrow-color: #ffffff;
}

Thanks,
Aaron

To the best of my knowledge you cannot change the color of the scrollbar or
button for a <select> tag in IE. You can change the colors of the scrollbars
in a <textarea>.
IEDesigner
 
J

Jim Moe

Jukka said:
Whatever it requires cannot be guaranteed, but people who try to do
such foolish things probably manage to discriminate against IE 7, for
example.


No.
It is not possible? Or you do not know?
 
A

acorn

Hello,
This contradicts with your previous statement. CSS is for optional
presentational suggestions.

"I need" was simply stating that it was a request from owner of the
page to do this, not something I needed to survive
What made you think arrow-color would work? It sounds you started
inventing properties and expected browsers to read your mind.
If that's the approach, why not simply use
dwim: now !important;
or something like that? :)

I simply grabbed this code from an alt.html newsgroup posting, tested
it, found some of the properties worked and others didn't. I wasn't
inventing properties, I was posting a message to the newsgroup asking
for help.
BTW, e.g. setting font-size: 10px shows that you have _not_ understood
the pros and cons of messing around with form fields and other
elements.

I have not explored the pros and cons of using css with form field
elements because I choose to leave form fields alone whenever possible.
I find that the appearance varies with each browser and OS and I choose
to keep those elements consitant instead of modifying them with css. I
had a request from the owner of this page to change the <select>
element, so I posted a message asking if it was possible. I now see
that it is not, and I thank everyone for their help.
The text-decoration: blink part was an attempt at a joke, right?

I thought so myself.

Thanks,
Aaron
 
Ad

Advertisements

Joined
May 1, 2015
Messages
1
Reaction score
0
Ignore this Jukka person. Obviously an imbecile troll just looking to make trouble. Or a 12 year old.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Top