Forums

knittingfrenzy18

Hi there,

Was just wondering if there was a way to style select options inline. I know, inline.

Red

knittingfrenzy18

Particularly font-family. Giving a dropdown to select a font, and I want them to see the font.

BTW, the title is supposed to be

<select> <option>s

but the parser didn't like that.

TheDoc

So you want a dropdown so that users can change the font that they see on your website? Something like that?

Either way you'll need to look into some PHP or JS.

You could do something similar to this, but change it from buttons to a select and font-size to font-family: http://stackoverflow.com/questions/891980/allow-users-to-change-font-size-in-a-webpage

knittingfrenzy18

Hi there,

I can do the PHP and JS, my question is the CSS!

If I do this:

<p>Font:</p>
			<select name="font-family" id="body-color" style="width: 70%;">
				<option value="Arial, 'Helvetica Neue', Helvetica, sans-serif">
					<span style="font-family: Arial;">Arial</span>
				</option>
				<option value="Baskerville, 'Times New Roman', serif">
					<span style="font-family: Baskerville;">Baskerville</span>
				</option>
				<option value="Cambria, Georgia, 'Times New Roman', serif">
					<span style="font-family: Cambria;">Cambria</span>
				</option>
				<option value="Century Gothic', 'Apple Gothic', sans-serif">
					<span style="font-family: Century Gothic">Century Gothic</span>
				</option>
				<option value="Consolas, 'Lucida Console', Monaco, monospace">
					<span style="font-family: Consolas;">Consolas</span>
				</option>
				<option value="'Courier New', Courier, monospace">
					<span style="font-family: Courier New;">Courier New</span>
				</option>
				<option value="Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif">
					<span style="font-family: Geneva;">Geneva</span>
				</option>
				<option value="Helvetica, Arial, sans-serif">
					<span style="font-family: Helvetica;">Helvetica</span>
				</option>
				<option value="'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif">
					<span style="font-family: Lucida Sans;">Lucida Sans</span>
				</option>
				<option value="Palatino, 'Palatino Linotype', Georgia, Times, 'Times New Roman', serif">
					<span style="font-family: Palatino;">Palatino</span>
				</option>
				<option value="Tahoma, Verdana, Geneva">
					<span style="font-family: Tahoma;">Tahoma</span>
				</option>
				<option value="Trebuchet, Tahoma, Arial, sans-serif">
					<span style="font-family: Trebuchet">Trebuchet</span>
				</option>
				<option value="Verdana, Geneva, Tahoma, sans-serif">
					<span style="font-family: Verdana;">Verdana</span>
				</option>
			</select>

The inline styling simply doesn't work and I'm wondering if there is a way to style them without any excessive CSS classes.

Senff

Dropdown options can be styled...but it's extremely limited. Colors are fine, font types are not. If you really need to style things, better avoid SELECT and OPTION and make a "fake" dropdown.

See http://jsfiddle.net/senff/bcQkN/1/ for an example of attempting to style a real dropdown, and a quick example of an HTML/CSS mock dropdown (which obviously needs a little more code behind it).

knittingfrenzy18

Thanks!

treehouse : what would you like to learn today?

Forums

Styling s