Languages

Menu
Sites
Language
How to customize default CSS/behaviour for <SELECT> on Web App?

I run a HTML file that redirects to a Webpage. 

On this Webpage I can't change the default CSS/behaviour of the dropdown <SELECT> element.

The behaviour is scrolling text when the text is too long.

Any ideas?

List

Responses

9 Replies
André Reus

You can customize Select using your own CSS or a library ...

Some helpful links 

1. https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript

2. https://stackoverflow.com/questions/14218307/select-arrow-style-change

Steve Legare

Thanks for your reply.

Do you know how to disable the scrolling text when text is too long in <OPTION>?

André Reus

Horizontal scroll or Vertical ? 

If Horizontal, you may try 

<div class="class_name">
   <select>
      <option></option>
      <option></option>
   </select>
</div>

.class_name {
    max-width: 100%; 
    overflow-x: hidden;
}

 

Steve Legare

This my SELECT

 

This i smy SELECT with the dropdown menu active when I touch first item

André Reus

So, where is your scroll ? 

Steve Legare

The selected text "Faculte" is scrolling from right to left.

How can I style or reset the default style of this dropdown menu?

André Reus

Are you using default select menu of Tizen or you modified it? Please give your code with modified css

Steve Legare

Default SELECT without CSS modifications.

You can reproduce it by adding a SELECT to the BASIC template for Web app.

André Reus

As i said earlier, you can modify it with CSS. You may find solution on Samsung TV forum => http://developer.samsung.com/forum/?topCtgy=06