Styling <option> Pulldown on FormBuilder

[fearmydesign]

Hello, is it possible to style the pulldown menu options on a form done using FormBuilder?

I have styled everything on the form but I am having a really hard time making the *pulldowns* consistent with the look of the form :-/

Here is the form (see pulldown options): http://baltimoreprotectionservices.com/ ... ade-rental

This is the code I am using on the input part of the form template:

Code: Select all

{* * * INPUT * * *}
			{/if}
			{if $entry->multiple_parts == 1}
				{section name=numloop loop=$entry->input}
					{if $entry->label_parts == 1}
				               <div>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}</div>
					{else}
						{$entry->input[numloop]->input}
					{/if}
					{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
				{/section}
			{else}
				{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
			{/if}
			{if $entry->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/if}
	{* * * DIV FOR RED ARROW ERROR * * *}<div class="error_message">{if $entry->valid == 0} <--- {$entry->error}{/if}</div>
			{if $entry->needs_div == 1}

{* * * INPUT * * *}
<div class="clear"></div>

I have tried to isolate the <option> values by trying to add a <div> and then styling it, but I can't seem to get it:
*This didn't work*

Code: Select all

{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}<div class="PULLDOWN">{$entry->input[numloop]->op}</div>{/if}

*This didn't work either*

Code: Select all

<div class="PULLDOWN">{$entry->input[numloop]->input}</div>

I found a couple of articles/questions that say this can't be done (to style <select><option> values in html), but I know there has to be a way around it. I read about a suggestion to go from <select> to <ul> but I can't even find where to do that!
http://stackoverflow.com/questions/1230 ... rom-safari

Any suggestions?

[calguy1000]

Well, it appears you can't effect padding in options in webkit browsers (like chrome).

However you can effect stuff like color and font. ...
Unfortunately, Formbuilder won't allow you to set id's or classes for individual options.

You should be able to use css3 selectors like:

div#myformdiv option {
color: red;
}

[fearmydesign]

Well, it appears you can't effect padding in options in webkit browsers (like chrome).

However you can effect stuff like color and font. ...
Unfortunately, Formbuilder won't allow you to set id's or classes for individual options.

You should be able to use css3 selectors like:

div#myformdiv option {
color: red;
}

Thanks Calguy. I see that it works only on FireFox, but not Safari, Chrome or IE... unfortunate. I was able to change only its color with the CSS3 selector, but like you said padding, margins, width etc do not work.

I guess I will have to leave like this until I find a way around it.

Thank you

[Rolf]

Might help https://www.cmscanbesimple.org/blog/styling-forms

Grtz. Rolf

[Dr.CSS]

I've never had problems styling selects/options...

[uniqu3]

I was able to change only its color with the CSS3 selector, but like you said padding, margins, width etc do not work.

Because you were applying style to <option> which is "the stuff inside select" and to style actual <select> field you have to target that.

Code: Select all

.barricade_form select {
    padding: 10px;
    border: solid 2px #878787;
    border-radius: 3px;
    width: 250px;  
    height: auto;
    float: left;
    margin: 5px 0px 0px 5px;
}

[rotezecke]

if you dont mind using jquery plugin:

http://www.marghoobsuleman.com/mywork/j ... index.html

comes with sample stylesheet. have images with your options, extra description, etc, highlight on hover, multiselect and more.

[dfoxx]

Does anyone know how the "data-image" attribute can be added ?
Because i can not find that answer.

The new link to the javascript code is:
http://www.marghoobsuleman.com/jquery-image-dropdown

[velden]

I know people use Smarty replace for that.
Either use it inside the FormBuilder template if you're using a custom template OR use it on the {FormBuilder ... |replace:'searchstring':'replacestring'}

A little dirty, but quick