BS4 Select - Can you change font properties?

1

I’m using the BS4 Select control in my app and while it works fine, it would be nice to differentiate between item 0 (telling users to “Choose Callculation Type”) and items 1-7, which are the different options.

Unfortunately adding “!” to make the first item a heading doesn’t work for this control (in Chrome or as a web app on an iPhone). I’ve added a “*” in front of item 0 so that it’s not selectable, but I’d also like to make it’s text bold with a darker background in the dropdown list.

Is there a way to do this?

Example

Regards,

Bob

2

You can try:

Select1_0.style.backgroundColor="grey"
Select1_0.style.fontWeight="bold"

“Select1” is the name of the BS select control, " _0" is the first list item.

3

Thanks.

That really come close to working in Chrome (just one odd behavior that can probably be sorted out). Unfortunately it’s ignored when run as a webapp on the iPhone.

Regards,

Bob

4

You may want to look at the bootswatch themes that are inxluded in the project properties. I’ve found they work nicely on just about every platform.

5

Thanks Gary. I did do that, my screenshot is with the “flatly” theme. The issue is that in the resulting Select list of items for any of the themes all of the items have the same font and background color, so there is no way to distiguish which one is the “title” item.

Pro_Certs code fixes this for Chrome (although I had to use “lightgrey” instead of “grey”). Unfortunately his code has no effect for iOS.

With Chrome:

Example2

On an iPhone:

Example iOS
Example iOS1242×2208 261 KB

6

Could you set the text as capitals with a down arrow

↓ CHOOSE CALCULATION TYPE ↓

8

I posted the wrong site last post. This is the class list.

There’s a couple ways. Basically add the class of the text colors you want to the item zero of the list is one way.

I know there’s a total line class, and I’m sure there was a header class.

9

And this will probably help too

10

Awesome Gary! Lots of late night reading material :slight_smile:

Regards,

Bob