CMS Made Simple Forums

Posted: **Tue Apr 23, 2013 10:37 pm**

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?

Posted: **Wed Apr 24, 2013 1:19 am**

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;
}

Posted: **Wed Apr 24, 2013 2:01 am**

calguy1000 wrote: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

Posted: **Wed Apr 24, 2013 8:54 am**

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

Grtz. Rolf

Posted: **Fri Apr 26, 2013 7:47 pm**

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

Posted: **Sat Apr 27, 2013 7:06 am**

fearmydesign wrote: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;
}

Posted: **Sun Apr 28, 2013 8:56 am**

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.

Posted: **Mon Nov 11, 2013 2:26 pm**

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

Posted: **Mon Nov 11, 2013 3:29 pm**

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

CMS Made Simple Forums

Styling <option> Pulldown on FormBuilder

Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder

Re: Styling <option> Pulldown on FormBuilder