3

Here is what I am trying to acheive:

  • Standard SELECT form element
  • The FIRST option will have font-family of Verdana
  • All other options will have font-family of Arial
  • After selecting an option, the SELECT will appear in the font-family of that option
  • This is done using a combination of CSS and JS. JS is used to change the class of the SELECT so that it can apply the correct style.

I have got this working to the above requirements in Firefox and IE11 but not in Chrome 36 (Windows).

Here is a JSFiddle: http://jsfiddle.net/KhvJc/

CSS:

select {
    width: 150px;
    font-size: 12px;
    padding: 5px;
    height: 30px;
}

/* when the first option is selected */
select.empty {
    color: #959595;
    font-family: Verdana;
}

/* all options except the first when the first option is selected and the select has focus */
select.empty:focus option:not(:first-child) {
    color: #282525;
    font-family: Arial;
}

/* first option when the select has focus */
select:focus option:first-child {
    color: #BDBDBD;
    font-family: Verdana;
}

JS:

$('select').change(function(){
    if($(this).val() == '')
    {
        $(this).addClass('empty');
    }
    else
    {
        $(this).removeClass('empty');
    }
}).change();

HTML:

<select>
    <option value="">Empty Option</option>
    <option value="1">Option 1</option>
    <option value="1">Option 2</option>
    <option value="1">Option 3</option>
    <option value="1">Option 4</option>
</select>

As you will see, in Chrome it does not apply the font-family to individual options but it does manage to apply the color. Anybody know how to fix this?

frogatto
  • 28,539
  • 11
  • 83
  • 129
MAX POWER
  • 5,213
  • 15
  • 89
  • 141
  • I think I've read somewhere that chrome does not allow styling – Brange Jul 30 '14 at 21:30
  • Are serious? Is it not possible to style the option till date. How are you even getting a colored output? Which version of Chrome? I don't see any colors? – Sarbbottam Jul 30 '14 at 21:35
  • @sarbbottam - please read the post properly, it clearly says "Chrome 36" and there is a JSFiddle link which you can test with. – MAX POWER Jul 30 '14 at 21:49
  • My bad @GSTAR. I misinterpreted it. I read it as 'working in ``Chrome``'. Was not aware that IE and FX are allowing the ``option`` to be styled. – Sarbbottam Jul 30 '14 at 21:56
  • your fiddle doesn't seem to work?? – sri Aug 08 '14 at 08:40
  • Cross browser support for styling option tags is poor. Consider creating a widget or using an existing widget and editing its properties to get what you want. Here is an existing widget that you can try: http://brianreavis.github.io/selectize.js/ – ctwheels Aug 08 '14 at 15:19
  • 1
    This has been logged as issue 44917 with Chromium (4 years ago so...) https://code.google.com/p/chromium/issues/detail?id=44917 – David Gilbertson Aug 10 '14 at 10:48

3 Answers3

4

Not certain about exact sequence of logic at OP ? Is option:first-child the only element whose font-family property is intended to be set to Verdana ? With other option elements font-family property set to Arial ? Then , after initial select , or change event , option:first-child font-family is set to Arial ?

The piece at OP appear to work o.k. at jsfiddle , setting font-family , at chrome unstable (37) , and chromium (33).

If not appear to work there , try adding

!important

after font-family property value, i.e.g.,

Verdana !important;

Arial !important;

jsfiddle http://jsfiddle.net/guest271314/kAdL9/

jsfiddle http://jsfiddle.net/guest271314/E2dze/ (applying Monospace and Impact fonts , respectively ; which may be easier to view the differences of ?)

See

Override USER AGENT STYLE SHEET - Chrome

chrome : how to turn off user agent stylesheet settings?

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • The first option is Verdana, all other options are Arial. After selecting an option, the select element (i.e. the outer part) must be displayed in the font-family of the selected option. Let me know if you want me to create a simple mock up, I know it is a bit confusing! – MAX POWER Aug 04 '14 at 19:10
4

Try this : (I've tested it in my Firefox and works fine)

/* For non-first options */
.not-first {
    color: #282525;
    font-family: Arial;
}

/* For first option */
.first {
    color: #BDBDBD;
    font-family: 'Times New Roman';
}

JavaScript codes:

$('option')
    .first().addClass('first')
    .siblings().addClass('not-first');

$('select').change(function(){
    $(this).attr('class', $('option:selected', this).attr('class'));
}).change();

JSFiddle

frogatto
  • 28,539
  • 11
  • 83
  • 129
-1

Add !important to the attribute values.

Vamshi
  • 41
  • 1
  • 8