jQuery italic select issue

Question

I am trying to make the select box italic and other half NOT-italic

Sample needed output:

I have tried the code below but the whole thing is in italic

$(document).ready(function() {
  $('#mySelect .firstOption').html("<span>NOT ITALIC </span><option>italic</option>");
  $('#mySelect').css('font-style', 'italic');
  $('#mySelect option').css('font-style', 'normal');
  $('#mySelect option span').css('font-style', 'normal');
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<select id="mySelect">
  <option class='firstOption'></option>
  <option>non-italic</option>
  <option>non-italic</option>
</select>

This seems more like a CSS issue. Also since you are assigning Style to the parent, it would make all child elements inherit the Italics. — Twisty, Oct 03 '18 at 03:25
@Twisty i have posted similar question here https://stackoverflow.com/questions/52618480/how-to-apply-italics-on-first-option-tag using css solution ... i cannot figure out what to do — eric, Oct 03 '18 at 03:28
Both this question and the other are lacking a complete example. Based on your screen shot, I can see that there is a lot more being applied to this than you're showing. — Twisty, Oct 03 '18 at 03:30
@Twisty the screenshot is photo-shopped - not coded. it is the result which i am after for — eric, Oct 03 '18 at 03:31
Have you looked at jQuery UI? http://jqueryui.com/selectmenu/ — Twisty, Oct 03 '18 at 03:35
I don't think you can do that with a basic select tag, please read this: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select. You should search for some plugin that let you create custom selects: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ — Shidersz, Oct 03 '18 at 03:55
@eric first line code look wired you add html in option tag however you put text which have option it is create option inside option. may be pseudo selector of jquery will help to solved your issue — Sachin Sarola, Oct 03 '18 at 04:28
i tried everything even pseudo selectors in css - nothing seems to fulfill the requirement — eric, Oct 03 '18 at 04:33

Twisty · Accepted Answer · 2018-10-03T05:21:56.957

Consider using jQuery UI SelectMenu. This allows more customization and allows a lot of theming. For example:

$(function() {
  $("#mySelect").selectmenu();
  $("#mySelect").selectmenu("instance")._renderItem = function(ul, item) {
    var li = $("<li>").html("<div>" + item.label + "</div>");
    console.log("LI Created.", li);
    if (item.element.hasClass("special")) {
      console.log("Special Found.", item.element);
      li.css("font-style", "italic");
    }
    console.log("Appending and Finish.");
    return li.appendTo(ul);
  };
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="mySelect">
  <option>Option 1</option>
  <option class='special'>Option 2</option>
  <option>Option 3</option>
</select>

This will recreate the SelectMenu as a <ul> and menu items can be set to Italics.

Update

If you want the Placeholder to be formatted, this can be done as well. You will not be able to style the Placeholder with standard HTML. Example:

$(function() {
  $("#mySelect").selectmenu({
    create: function(e, ui) {
      $(".ui-selectmenu-button .ui-selectmenu-text").html($(this).attr("placeholder"));
    }
  });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="mySelect" placeholder="Select <i>(Student, Teacher, Coach...)</i>">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

score 2 · Answer 2 · answered Oct 03 '18 at 04:26

2

After your HTML code, add this -

  $('#mySelect option:first').css('font-style', 'italic');

This makes only the first option italic keeping the rest normal.

CSS way -

select option:first-child{
  font-style: italic;
}

answered Oct 03 '18 at 04:26

M3ghana

1,231
1
9
19

hi @M3ghana. i have edited the question to make it clearer. I need the actual selected value to be in italics. Notice that some parts are in italic and some parts are not in italic. that is what i need. sorry english is not my native language - i hope this makes sense – eric Oct 03 '18 at 04:45

score 1 · Answer 3 · answered Oct 03 '18 at 04:41

1

Your other attempts, using CSS will work, yet since the browser gets to render the items, it can override the styling. Also, you cannot add an <option> inside an <option>.

$(function() {
  $('#mySelect .firstOption').html("<span>NOT ITALIC </span>italic");
});

option.firstOption {
  font-style: italic;
}

option.firstOption span {
  font-style: normal;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<select id="mySelect">
  <option class='firstOption'></option>
  <option>non-italic</option>
  <option>non-italic</option>
</select>

this is why your code is not working as expected.

answered Oct 03 '18 at 04:41

Twisty

30,304
2
26
45

hi @Twisty. i have edited the question to make it clearer. I need the actual selected value to be in italics. Notice that some parts are in italic and some parts are not in italic. that is what i need. sorry english is not my native language - i hope this makes sense – eric Oct 03 '18 at 04:45
@eric so, you want the Placeholder formatted? `Select (Booster Parent, Student, Coach, Teacher...)` – Twisty Oct 03 '18 at 04:54
yes something like that !! does that work? i have tried it in [jsfiddle](http://jsfiddle.net/DxK47/134/) it does not seem so, can you give an example? – eric Oct 03 '18 at 04:59
@eric see the Update to my original answer. – Twisty Oct 03 '18 at 05:16

jQuery italic select issue

3 Answers3