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

Discussion in 'HTML' started by acorn, Feb 24, 2006.

  1. acorn

    acorn Guest

    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
    acorn, Feb 24, 2006
    #1
    1. Advertising

  2. "acorn" <> wrote:

    > 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?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 24, 2006
    #2
    1. Advertising

  3. acorn

    IEDesigner Guest

    "acorn" <> wrote in message
    news:...
    > 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
    IEDesigner, Feb 24, 2006
    #3
  4. acorn

    Jim Moe Guest

    Jukka K. Korpela wrote:
    >
    > 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.
    >

    It is not possible? Or you do not know?


    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Feb 24, 2006
    #4
  5. acorn

    acorn Guest

    Hello,

    Jukka K. Korpela wrote:
    > "acorn" <> wrote:
    > > I need

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

    > > 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? :)


    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
    acorn, Feb 24, 2006
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. kurt sune
    Replies:
    1
    Views:
    1,641
    =?Utf-8?B?SmFjZWsgU3Rhd2lja2k=?=
    Jul 29, 2005
  2. Ron Brennan
    Replies:
    10
    Views:
    654
    Mr. Clean
    Jul 18, 2003
  3. Fadesimo
    Replies:
    7
    Views:
    6,480
    SpaceGirl
    Dec 14, 2004
  4. Bogdan
    Replies:
    1
    Views:
    2,254
    Alexey Smirnov
    Nov 5, 2008
  5. Kamaljeet Saini
    Replies:
    0
    Views:
    388
    Kamaljeet Saini
    Feb 13, 2009
Loading...

Share This Page