Solved

CSS dropdown select option:  styling WITHIN option text

Posted on 2015-01-06
3
266 Views
Last Modified: 2015-01-06
i've found several CSS schemes that work for styling an HTML FORM dropdown menu
so that it uses a nice font and overall stylings.

However, for this project,  the option text label content has three components (columns)  that really could use some graphic delineation,
such as tab-like alignments ("columns") or at least  Bold and/or Color changes    in order to appear
somewhat organized and more readable.

For instance, here's a sample option label content:

6'x9'           FREE SHIPPING    -        US$587.00
7'6"x9'6"           FREE SHIPPING    -        US$778.00
8'x10'           FREE SHIPPING    -        US$873.00
18'6"x24'8"           SHIPPING CHARGES APPLY    -        US$1959.00

Even with several tries of CSS stylings found on the web,  there seems no way to align, etc.

it's database-generated (which in itself is no problem), (and easy to apply divs/spans/classes)
but i'm looking for some technique to apply a tidy formatting scheme.

I suppose i could revert to some sort of a flyout radio button scheme that collapses once selected, and
then the text could be aligned with CSS classes.  (but seems awfully awkward)

any thoughts/suggestions?

thanks!
0
Comment
Question by:willsherwood
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 250 total points
ID: 40534823
you can't style select elements to that degree. So what people end up doing is scripting a solution which replaces the select dropdown with a list (ul), which can be styled to your heart's content. There are javascript libraries out there that simplify this.

Personally I would just use a ul to begin with, and forget about the select drop-down. You will need to pass the values to your form through javascript. There are a number of different ways to do that depending on how you are submitting the form.
0
 
LVL 4

Assisted Solution

by:Tom Chadaravicius
Tom Chadaravicius earned 250 total points
ID: 40534860
1. To second and augment what Kyle has said, you can have more freedom to style the surrounding element than the stubborn one ("text" appears stubborn.) I use <div> preceding text to accomplish that.
There may not be ul around the text but there's going to be <div> and body - the latter for sure.
2. All elements get set up in the "bootstrap" portion of the CSS - the very top of the first sheet.
input[type=text]{ (your style here) }
Chrome is especially sensible to that (but Chrome also has a quite extensive "Inspect Element" option to track where the style of an element is defined.)
0
 

Author Closing Comment

by:willsherwood
ID: 40534872
based on your excellent comments, i was able to search in this new direction and found this solution:
http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

thank you!
1

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question