Skip to Content (Press Enter)
2019-04-18 15-23-21
Naina
106Views
6Comments
Solved
Change the color of combobox select option
Question
Best Practices
CSS
Data
Traditional Web
Application Type
Traditional Web
Service Studio Version
11.10.17 (Build 40956)

Hi , 

I want to change the color of small selector inside the combo box ..

plz assist me 


0
0
09 Apr 2021
Copy Link
2026-02-26 06-29-24
Rahul
 
MVP
Solution

Hi Naina,

Use this css on page-

    select{

        margin:40px;

        background: yellow;

        color:#000;

        text-shadow:0 1px 0 rgba(0,0,0,0.4);

    }

    option:not(:checked) { 

        background-color: #FFF; 

    }


or visit this URL


Hope this will help you.

Regards

Rahul

See solution in context
1
0
09 Apr 2021
Copy Link
2020-01-08 08-43-00
Rahul Kumar
Solution

Hi Naina, 

Try to inspect it. 

What I get , It is a image of 28 x 14 px.. Find Image that you want and replace it.


Hope this help,

Thanks

See solution in context
0
0
09 Apr 2021
Copy Link
2020-01-01 07-11-22
Pravi Gupta
Solution

Replying to Naina's comment on 15 Apr 2021 07:50:41

Hi Naina,
Can you please confirm, where you added the icon?
You should add the icon in Resources folder and select deploy to target directory.

select{
background-image: url(/ModuleName/IconName.png)
}
See solution in context
0
0
15 Apr 2021
Copy Link
2026-02-26 06-29-24
Rahul
 
MVP
Solution

Hi Naina,

Use this css on page-

    select{

        margin:40px;

        background: yellow;

        color:#000;

        text-shadow:0 1px 0 rgba(0,0,0,0.4);

    }

    option:not(:checked) { 

        background-color: #FFF; 

    }


or visit this URL


Hope this will help you.

Regards

Rahul

1
0
09 Apr 2021
Copy Link
2020-01-01 07-11-22
Pravi Gupta

Hi Naina,

The arrow in dropdown is loaded as a image. You can change the background-image property value (to a different color image) to change the arrow.

0
0
09 Apr 2021
Copy Link
2020-01-01 07-11-22
Pravi Gupta
Solution

Replying to Naina's comment on 15 Apr 2021 07:50:41

Hi Naina,
Can you please confirm, where you added the icon?
You should add the icon in Resources folder and select deploy to target directory.

select{
background-image: url(/ModuleName/IconName.png)
}
0
0
15 Apr 2021
Copy Link
2019-04-18 15-23-21
Naina

Thanks a lot ...

lot of CSS 

I fixed it 

0
0
15 Apr 2021
Copy Link
2020-01-08 08-43-00
Rahul Kumar
Solution

Hi Naina, 

Try to inspect it. 

What I get , It is a image of 28 x 14 px.. Find Image that you want and replace it.


Hope this help,

Thanks

0
0
09 Apr 2021
Copy Link
2019-04-18 15-23-21
Naina

Hi Team,

@Rahul Sahu  @Pravi Gupta @Rahul Kumar 

I can mark all your responses as solution ,

Thanks 

I have played around the CSS and fixed thanks for all the responses ...




0
0
15 Apr 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.