style select tag - HTML / CSS

Rolf Brauser

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

Jul 20 '05 #1

Subscribe Reply

82063

Edwin van der Vaart

Rolf Brauser schreef:

Hi,
is it possible to style the elements from an dropdownmenue <select>
<option></option> </select> tag ?

Yes.
<head>
<style type="text/css">

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

Jul 20 '05 #2

Rolf Brauser

> Yes.

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

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

Jul 20 '05 #3

Neal

On Tue, 5 Oct 2004 17:39:06 +0200, Rolf Brauser <fa******@a1.ne t> wrote:

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

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

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.

Jul 20 '05 #4

Christoph Paeper

Edwin van der Vaart <pi************ @yahoo.co.uk>:

.listheader {
color: #FFFFFF;
background: #000000;
}
.listdata {
color: #000000;
background: #FFFF66; <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>

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

Jul 20 '05 #5

Edwin van der Vaart

Christoph Paeper schreef:

[snip some css and html code]

Eek! More like:

[snip corrected css and html code]
Thanx for correcting them.
I was in a bit hurry.
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?

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

Jul 20 '05 #6

Rolf Brauser

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.

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

Jul 20 '05 #7

Neal

On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser <fa******@a1.ne t> wrote:

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.
I wont put a white font on a white background.

Interesting. You understand the color contrast will be... insufficiently
readable?
It depends on how u design
things.

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.

Jul 20 '05 #8

Andrew Thompson

On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser wrote:

I wont put a white font on a white background.

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

Jul 20 '05 #9

Neal

On Wed, 06 Oct 2004 13:24:23 GMT, Andrew Thompson <Se********@www .invalid>
wrote:

On Wed, 6 Oct 2004 14:43:02 +0200, Rolf Brauser wrote:
I wont put a white font on a white background.

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

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

Jul 20 '05 #10

Similar topics

15000

adding line-through style to a table row

by: Andrus | last post by:

I want that if user clicks in a checkbox, the strike-through effect applices to current table row. I tried the following code in IE, but nothing happens. Any idea ? <table> <tr><td><input type=checkbox onclick="cbonclick(this)"></td> <td><input type=text value="Row 1" ></td>...

Javascript

102925

HTML Select option selected color style

by: Jeff Anderson | last post by:

Is there a style for a select option's "selected" color? For example: <HTML> <BODY> <FORM NAME="form1"> <SELECT NAME="mySelect" SIZE="7" style="background-color:red;"> <OPTION>Test 1 <OPTION>Test 2 <OPTION>Test 3 <OPTION>Test 4

HTML / CSS

2341

Style "fallback"?

by: Jeremy | last post by:

Apologies if the terminology isn't quite right here... say we have the following code: <SELECT NAME="p1_val" class=list-element> If the class "list-element" isn't defined, is it possible to specify an alternative class that is to be used? (Rather like the <font face=...>

HTML / CSS

2543

setting style of dynamic options

by: netclectic | last post by:

I'm dynamically adding options to a select list in javascript and i need to be able to set the height of the option, but setting style.height has not effect, I also tried style.pixelHeight but no joy. i'm doing something like this (: var selectControl = document.getElementById('MySelect'); var el = document.createElement('option');...

Javascript

2151

javascript, style sheets and hiding table rows

by: Ben | last post by:

I have a form for data entry which is in a table. I have a select box to enter a customer name, which takes it's options from the customer database. I have a button to add a new customer. What I want is for the relevant customer fields to magically appear underneath the selelect box when the "add customer button" is pressed. For some reason...

Javascript

17672

onclick="element.setAttribute("style",value)"

by: johnsuth | last post by:

I want to produce a trivial demonstration of dynamic modification. I thought that pressing a button might change its color. I studied O'Reillys books and successfully created the button with a fancy style, but the onclick fails to do anything no matter what permutation of parameters I try. <input type=button...

Javascript

8724

applying style to <select>

by: Isha | last post by:

Hi all, I wanted to change the background color for only the first option in a select box, but following changed the background color for the whole dropdown box. <select name="alltags" class="select" style="background:yellow"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>

Javascript

1103

How to select style rule ?

by: John Devlon | last post by:

Hi, Does anyone know how to apply a style rule to controle? Where can i select de style role after the file has been linked to the page ? I can do it by code but is there a window that shows me all style rules ? Thanx

ASP.NET

3418

fields with style display:none displayed in IE

by: plsHelpMe | last post by:

Hi All, I am facing a weired issue. I am having a search form with some of the fields on it and a button which submits these fields values. Functionaly everything is working fine but sometimes when i try to submit my search form i can see the fields which are hidden using the style "display:none " visible for a moment just before my page is...

HTML / CSS

7473

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7660

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7431

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7761

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

5976

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5337

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

3457

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3444

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

709

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General