Is it possible to change the style for a v-select ?

Looking to style a v-select (drop down) to not look like a drop down but to look like a menu.
Is this possible - i did look around the forums and the theme variants but no dice.

thanks in advance

In some browsers it’s possible, in others not so much. CSS is the way to do it, and the selector for the native select element is .v-select-select (ugh).

Older IE*s are probably the most stubborn to apply any styling, but more recent versions of all browsers allow some level of styling. Some even allow you to get rid of all normal chrome, and specify whatever styles you like.

Hey Jouni,
Hope all is well and happy new year to you and your family!

Would you happen to have any examples of styled v-select-select.
You know i thought the double select was a mistake on my part i deleted it when i originally wrote the post :slight_smile:

Good morning :wink:

I am stuck at this point too. I want to use the ListSelect (configured with 20 rows in singleselect mode) to emulate a menu with alternating background-colors for the
option
elements and a small image on the right when there are child elements in the menu tree.

Here is my CSS so far:

.wn-menu-content-list .v-select-select {
	border: none;
}

.wn-menu-content-list .v-select-select option {
	padding: 4px;
	line-height: 24px;
	height: 24px;
	font-family: Tahoma;
	font-size: 12px;
	color: #003399;
}

But neither IE, Chrome or Safari react on the height settings, just working in Firefox. I read that select boxes are some kind of implementation in the operating system and can therefore not be proper styled, is that right?

Here is an image how it should look like when its finished some day:

As a note: The horizontal black lines are annotations from my style guide and not part of the design.

Thanks in advance,
Marc

I’d say you’re out of luck with styling the actual option elements in any other browser than Firefox. No other browser does that if I remember correctly. You’re only option might be using ComboBox.

Thanks, all good!

Here’s an example of a styled native select. Notice the “appearance” properties, which will remove any user agent styles from the element (if that is supported):


select.v-select-select {
	background: transparent; 
	border: none;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px 0 0;
	line-height: 28px;
	height: 28px;
	background: transparent url(img/btn-arrow.png) no-repeat 100% 50%;
}

thank u much

is there a way to make different colors for two ore more elements in ListSelect component?
I want to add few elements in one color then more in other… when i setStyle i set it for whole component how i define that style is set for only one element of that list.
Thanks in advance

How to modify NativeSelect Caption font style in CSS

Hey jouni,how to resize nativeselect height width in css vaadin 8