CODEWITHSUNDEEP
htmlcss
naturesenshi
naturesenshi

Reputation: 340

How to Customize a multiple Select box using CSS

Is there a way to customize a single selection box with multiple open options using only CSS? I have looked everywhere and I can't seem to find any immediate joy :( My code will be adding options to a select box based on searches but for simplicity sake, I've just inserted that sample to show what it will look like. Was wondering if you could change the background-color, color when hovered, animations etc. 

<div id="album">
<select id="albumPicker" size="5">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

Thank you for your time!

Upvotes: 4

Views: 4267

Answers (3)

Wowsk
Wowsk

Reputation: 3675

If you are wanting to style each option individually, give each option an id and in your CSS code style the option element just like you would any other element. 

<style>
#option1{
    color:blue;
    background:red;
}
#option1:hover{
    color:red;
    background:blue;
}
</style>
<div id="album">
<select id="albumPicker" size="5">
  <option id="option1">1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

Upvotes: 4

wmeade
wmeade

Reputation: 359

If I'm understanding your question correctly, you may be able to accomplish this using the :nth-child pseudo class.

For example:

#albumPicker option:nth-child(2n+2){
  background-color: red;
}

This will select every other option field, starting with the second option. Here's a fiddle to demonstrate.

Upvotes: 0

plushyObject
plushyObject

Reputation: 1131

I am not 100% that this can be done using strictly CSS. I have used jQuery plugins such as Selectric in the past to accomplish this. Hope it helps!

Upvotes: 0

Related Questions