style select tag

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Rolf Brauser
    #1

    style select tag

    Hi,
    is it possible to style the elements from an dropdownmenue <select>
    <option></option> </select> tag ?
    Thanks for any help.
    Rolf


    Tags: select style, style select
    • Edwin van der Vaart
      #2
      Re: style select tag

      Rolf Brauser schreef:[color=blue]
      > Hi,
      > is it possible to style the elements from an dropdownmenue <select>
      > <option></option> </select> tag ?[/color]

      Yes.
      <head>
      <style type="text/css">
      <!--
      ..listheader {
      color: #FFFFFF;
      background: #000000;
      }
      ..listdata {
      color: #000000;
      background: #FFFF66;
      }
      -->
      </style>
      </head>
      <body>
      <form action="" method="get">
      <select>
      <option selected>Beers of the World</option>
      <option class="listhead er">Campbelltow n</option>
      <option class="listdata "> - Springbank 21 yr.</option>
      <option class="listdata "> - Springbank 15 yr.</option>
      <option class="listdata "> - Springbank 12 yr. </option>
      <option class="listdata "> - Glen Scotia </option>
      <option class="listhead er">Highland</option>
      <option class="listdata "> - Royal Lochnager Selected Reserve </option>
      <option class="listdata "> - Oban 14 yr. </option>
      <option class="listdata "> - Lock Dhu Black 10 yr. </option>
      <option class="listdata "> - Highland Park 12 yr.</option>
      <option class="listdata "> - Glenmorangie 1971 Vintage. </option>
      </select>
      </form>
      </body>
      --
      Edwin van der Vaart
      http://www.semi-conductor.nl/ Links to Semiconductors sites
      http://www.evandervaart.nl/ Under construction

        Comment

        • Rolf Brauser
          #3
          Re: style select tag

          > Yes.[color=blue]
          > <head>
          > <style type="text/css">
          > <!--
          > .listheader {
          > color: #FFFFFF;
          > background: #000000;
          > }
          > .listdata {
          > color: #000000;
          > background: #FFFF66;
          > }[/color]

          Hi Edwin,
          Thanks that rocks nice, but isnt exactly what I meant. Is it also possible
          to color the border, the arrow, and the other scrollbar elements?
          Rolf



            Comment

            • Neal
              #4
              Re: style select tag

              On Tue, 5 Oct 2004 17:39:06 +0200, Rolf Brauser <fastrolf@a1.ne t> wrote:
              [color=blue][color=green]
              >> Yes.
              >> <head>
              >> <style type="text/css">
              >> <!--
              >> .listheader {
              >> color: #FFFFFF;
              >> background: #000000;
              >> }
              >> .listdata {
              >> color: #000000;
              >> background: #FFFF66;
              >> }[/color]
              >
              > Hi Edwin,
              > Thanks that rocks nice, but isnt exactly what I meant. Is it also
              > possible
              > to color the border, the arrow, and the other scrollbar elements?
              > Rolf[/color]

              Those are part of the OS and aren't really smart to mess with even where
              you can. Some studies have shown decreased usability when these arenm't
              easily recognized.

                Comment

                • Christoph Paeper
                  #5
                  Re: style select tag

                  Edwin van der Vaart <picayunish2000 @yahoo.co.uk>:
                  [color=blue]
                  > .listheader {
                  > color: #FFFFFF;
                  > background: #000000;
                  > }
                  > .listdata {
                  > color: #000000;
                  > background: #FFFF66;[/color]
                  [color=blue]
                  > <select>
                  > <option selected>Beers of the World</option>
                  > <option class="listhead er">Campbelltow n</option>
                  > <option class="listdata "> - Springbank 21 yr.</option>
                  > <option class="listdata "> - Springbank 15 yr.</option>
                  > <option class="listdata "> - Springbank 12 yr. </option>
                  > <option class="listdata "> - Glen Scotia </option>
                  > <option class="listhead er">Highland</option>
                  > <option class="listdata "> - Royal Lochnager Selected Reserve </option>
                  > <option class="listdata "> - Oban 14 yr. </option>
                  > <option class="listdata "> - Lock Dhu Black 10 yr. </option>
                  > <option class="listdata "> - Highland Park 12 yr.</option>
                  > <option class="listdata "> - Glenmorangie 1971 Vintage. </option>
                  > </select>[/color]

                  Eek! More like:

                  optgroup {
                  color: #FFF;
                  background: #000;
                  }
                  option {
                  color: #000;
                  background: #FF6;
                  }

                  <fieldset><lege nd>Beers of the World</legend><select multiple>
                  <optgroup label="Campbell town">
                  <option value="sb21">Sp ringbank 21 yr.</option>
                  <option value="sb15">Sp ringbank 15 yr.</option>
                  <option value="sb12">Sp ringbank 12 yr.</option>
                  <option value="glsc">Gl en Scotia</option>
                  </optgroup>
                  <optgroup label="Highland ">
                  <option value="rlsr">Ro yal Lochnager Selected Reserve</option>
                  <option value="ob14">Ob an 14 yr.</option>
                  <option value="ldb10">L ock Dhu Black 10 yr.</option>
                  <option value="hp12">Hi ghland Park 12 yr.</option>
                  <option value="gm71">Gl enmorangie 1971 Vintage.</option>
                  </optgroup>
                  </fieldset></select>

                  Of course CSS conforming UAs do not have to style form widgets and some
                  indeed choose not to or only to a certain degree.

                  P.S.: 21-year-old beer?

                  --
                  No sig today, my .sig has gone away
                  The divider stands forlorn, a symbol of the dawn
                  No sig today, it seems a common sight
                  But people reading by don't know the reason why

                    Comment

                    • Edwin van der Vaart
                      #6
                      Re: style select tag

                      Christoph Paeper schreef:

                      [snip some css and html code]
                      [color=blue]
                      > Eek! More like:
                      >
                      > [snip corrected css and html code][/color]

                      Thanx for correcting them.
                      I was in a bit hurry.
                      [color=blue]
                      > Of course CSS conforming UAs do not have to style form widgets and some
                      > indeed choose not to or only to a certain degree.
                      >
                      > P.S.: 21-year-old beer?[/color]

                      Heee.
                      It was an example from a cd of Dreamweaver MX 2004 Bible :-P
                      --
                      Edwin van der Vaart
                      http://www.semi-conductor.nl/ Links to Semiconductors sites
                      http://www.evandervaart.nl/ Under construction

                        Comment

                        • Rolf Brauser
                          #7
                          Re: style select tag

                          [color=blue]
                          > Those are part of the OS and aren't really smart to mess with even where
                          > you can. Some studies have shown decreased usability when these arenm't
                          > easily recognized.[/color]

                          I wont put a white font on a white background. It depends on how u design
                          things.


                            Comment

                            • Neal
                              #8
                              Re: style select tag

                              On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser <fastrolf@a1.ne t> wrote:
                              [color=blue][color=green]
                              >> Those are part of the OS and aren't really smart to mess with even where
                              >> you can. Some studies have shown decreased usability when these arenm't
                              >> easily recognized.[/color]
                              >
                              > I wont put a white font on a white background.[/color]

                              Interesting. You understand the color contrast will be... insufficiently
                              readable?
                              [color=blue]
                              > It depends on how u design
                              > things.[/color]

                              Perhaps we need to see a sample of what you intend, and post a URP to the
                              uploaded example. Because in my experience, what you're after is at best
                              unnecessary and at worst disasterous.

                                Comment

                                • Andrew Thompson
                                  #9
                                  Re: style select tag

                                  On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser wrote:
                                  [color=blue]
                                  > I wont put a white font on a white background.[/color]

                                  Does that mean..
                                  a) I want to put.. (wont -> want)
                                  b) I will not put.. (wont -> won't -> will not)

                                  --
                                  Andrew Thompson
                                  http://www.PhySci.org/codes/ Web & IT Help
                                  http://www.PhySci.org/ Open-source software suite
                                  http://www.1point1C.org/ Science & Technology
                                  http://www.lensescapes.com/ Images that escape the mundane

                                    Comment

                                    • Neal
                                      #10
                                      Re: style select tag

                                      On Wed, 06 Oct 2004 13:24:23 GMT, Andrew Thompson <SeeMySites@www .invalid>
                                      wrote:
                                      [color=blue]
                                      > On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser wrote:
                                      >[color=green]
                                      >> I wont put a white font on a white background.[/color]
                                      >
                                      > Does that mean..
                                      > a) I want to put.. (wont -> want)
                                      > b) I will not put.. (wont -> won't -> will not)[/color]

                                      Good eye - my response was predicated on "want to".

                                        Comment

                                        Previous template Next
                                        Working...