[CSS] een css stijl geven aan een selectbox

[Verwijderd]

Ik heb een selectbox die ik een bepaalde look and feel wil geven bij voorkeur een scrollbalk met bepaalde kleuren, nu lukt me dat prima in de body en bij het input element. Maar het select element heeft er geen zin, wat ik ook probeer. Ik kan op internet niet veel vinden, alleen dat een borderstijl niet werkt in IE6 maar wel in Mozilla.

Maar daar zit ik niet echt op te wachten.

Is er iemand die weet of het mogelijk is om dat select element te customizen ? En misschien ook iemand die weet hoe ?

[supakeen]

code:

<select id="bal" name="bal">
bal<option value="bal">
</select>

Via id, class gedaan of direct element

[KolNedra]

Naar mijn mening kun je alleen het lettertype en daarbijbehorden eigenschappen veranderen, dus niet de scrollbar en achtergrond kleur

[party42]

code:

INPUT.listbox
{
    FONT-SIZE: 11px;
    COLOR: #ffffff;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #1b1d4f
}

en vervolgens:

code:

<select class=listbox>
</select>

werkt?

[ Voor 13% gewijzigd door party42 op 12-06-2003 10:03 ]

[DeverauX]

dus niet de scrollbar en achtergrond kleur

background-color wil wel hoor , maar inderdaad voor de rest kan je alleen je lettertype en overige bijbehorende properties instellen

[Verwijderd]

Ik heb inderdaad op de conventionele manier de eigenschappen verandert.

}
input {
background-color:#99B9CB;
font: 11px Arial;
border-color:ffffff;
border-width:1px;
border-style:double;
}

dit is mijn input veld en alle eigenschappen worden keurig weergegeven.

select {
background-color:#99B9CB; werkt
font: 11px Arial; werkt
border-color:#DFE2A8; werkt niet
border-width: 1px; werkt niet
border-style: inset; werkt niet
width:475px; werkt
height:50px; werkt
}

In de body staat de volgende code

}
body { scrollbar-face-color: #BBC248; scrollbar-shadow-color: #BBC248; scrollbar-highlight-color: #BBC248; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #DFE2A8; scrollbar-arrow-color: #000000;
}

Alle input elementen die ik erin zet krijgen keurig deze gekleurde scrollbalken mee, dus het werkt. behalve het select element die doet eigenwijs.

typos

[Bosmonster]

Je kunt ook nog vanalles per option instellen trouwens

[Verwijderd]

Hehehehe dat weet ik, maar helaas das nu net niet wat ik wil... Misschien moet ik de zoektocht maar staken en de rest van mijn formulier aanpassen aan mijn select tags... alleen een bgcolor en een fontstijltje Blehhhh

[ Voor 3% gewijzigd door Verwijderd op 12-06-2003 10:13 ]

[Skef]

selectboxen worden dacht ik door het OS gerenderd, en niet door de browser.

Daarom kun je er verder qua stijl niet zo gek veel mee.

Het is wel mogelijk om in DHTML je eigen te maken, dmv diverse divjes. Hierover zijn wel topics te vinden @GoT...

[Verwijderd]

party42 schreef op 12 June 2003 @ 10:02:

werkt?

Nee, dat gaat nooit werken. Ik hoop dat je inziet waarom niet.

[party42]

hmm
als ik het nou eens zonder de
INPUT opschrijf

* party42 kijkt ff snel naar onze stylesheet zoals hier gebruikt...

Yep, zonder de INPUT... Dus gewoon .listbox

anders: Cheatah, hoezo?

[DeverauX]

INPUT != SELECT
Dat was dus ook wat Cheetah bedoelde

[party42]

dat zei ik dus ook

ik had per ongeluk neergezet

code:

INPUT.listbox

maar het moest zijn

code:

.listbox

dus relax he. 't is nog vroeg... verkeerd copy/paste werk...

[InZane]

party42 schreef op 12 June 2003 @ 10:51:
maar het moest zijn

code:

.listbox

select.listbox mag ook

[Johnny]

InZane schreef op 12 June 2003 @ 12:15:
[...]


select.listbox mag ook

Dan werkt de stylesheet niet meer op inputs...

dan moet je het zo doen:

code:

select.listbox, input.listbox {}

[DeFeCt]

party42 schreef op 12 juni 2003 @ 10:51:
dus relax he. 't is nog vroeg... verkeerd copy/paste werk...

Afgezien daarvan geef je geen antwoord op de vraag, TS vraagt hoe de scrollbar van zijn selectbox aan te passen...

Maar goed, zoals al gezegt, dat kan niet, wordt door het systeem gerenderd.

Oplossing: of geen gekleurde scrollbar of zelf een select box bouwen in dhtml

[party42]

DeFeCt schreef op 12 juni 2003 @ 12:31:
[...]


Afgezien daarvan geef je geen antwoord op de vraag, TS vraagt hoe de scrollbar van zijn selectbox aan te passen...

originele vraag:

Is er iemand die weet of het mogelijk is om dat select element te customizen ? En misschien ook iemand die weet hoe ?

spreekt van een algemene customize...

Daarnaast zegt hij wel dat hij bij voorkeur de scrollbar wil doen maar niet dat hij hier specifiek naar op zoek is.

T'is maar hoe je de vraag leest denk ik...

Maar inderdaad, zelf bouwen met DHTML (of flash)

zie hier:
http://webfx.eae.net/dhtml/select/jsGenerated.html