Changing Drop Down box - Post ID 239870

User 2722059 Photo


Registered User
1 post

I'm a relatively new FB user and love the drag and drop. Unfortunately I am only able to use FB to provide a starting point for a complicated form I am building. I'm manually coding all of the back end to connect to our database where dynamic drop down, radio and check box lists are being used to drive the display choices. I've got all of that working.

My question is where can I change the look of the drop down boxes. They default to being too tall for my taste and when they have more than 4 elements it's not obvious you can scroll to select others. I'm really looking for more of a traditional pop-up where a click brings up an obvious list of choices: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 or at a minimum be able to make the down boxes less tall. The div code is styled with "fb-listbox", and I found that code in the default.CSS file
/* Rule for the listbox container */
#docContainer .fb-listbox {}

/* Rule for the listbox select */
#docContainer .fb-listbox select {
color: #555;
background: url(../images/fb_bg_input.png);
font: normal 12px Helvetica, Arial, Sans-serif;
padding: 3px;
border-color: #690091;
}

/* Rule for the listbox select option (selected element) */
#docContainer .fb-listbox select option { padding: 3px 0px; }


but I can't get a height attribute to do anything. For that matter, I don't see anything that defines the drop-box style being used – but I'm not a CSS wizard either!

I did try with my Dark Purple them as well as the default form theme. Same design in both.

Can anyone help me out?
User 187934 Photo


Senior Advisor
20,271 posts
Online Now

You can override the defaults by adding either a separate style sheet or page style rule below the current style sheet link.
This will do the select and options
#docContainer .fb-dropdown select {
height:15px;
font-size:.6em;
}

This will do only the options
#docContainer .fb-dropdown option {
height:15px;
font-size:.6em;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.