40

I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:

<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>

This does not work: the browser does not like a SPAN element inside the OPTION element.

Is there some other way to style part of an OPTION element's text?

8 Answers 8

14

But you could always create a Custom select box. Refer the jsFiddle below,

JSFiddle for multi colored selectbox options

// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
        html: $this.children('option').eq(i).text()
        .split(' ').join(' <span style="color:red">'),
            rel: $this.children('option').eq(i).val()
    }).appendTo($list);
}
0
12

Nope. options are styled in a way native to the platform, and styling only a part of one doesn't work. (It usually wouldn't be a particularly good idea either.)

4
  • Any way to implement this? Preferrably Bootstrap or jQuery oriented. Mar 31, 2015 at 8:14
  • 17
    I don't feel that this response is 100% accurate nor does it provide any factual support for why it would not be a good idea to achieve what the question asker wants to do. More useful responses can be found below.
    – Tarquin
    May 2, 2016 at 0:19
  • 7
    useless answer!
    – Kasnady
    Jul 21, 2017 at 9:58
  • If you could elaborate a little more on why, that would make a better answer. :) Feb 15, 2020 at 0:21
11

Or you could do it with Bootstrap Drop Downs plus a couple lines of Javascript.

Here is the Bootstrap example with a slight alteration plus a 'lil Javascript:

$(function() {
   $('#my-select').find('li').click(function() {
      $('#selected').html($(this).html());
   });
});
<head>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id='my-select' class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="selected">Action</span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action <span style='color:red'>like Super Man</span></a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</body>

3
  • 1
    The question is how would one submit the value of this sort of dropdown.
    – Tarquin
    May 2, 2016 at 0:28
  • 1
    @Tarquin - perhaps this type of a solution could work for you: jsfiddle.net/abela/ovv0a0ed -- Obviously ignore all the extra css crap in there I was playing around with. The important part is the data-id and passing it to a hidden field within your form. As soon as the given <li> is selected, the jquery on.click will fire and pass the data-id= value to the hidden input form.
    – Abela
    Sep 12, 2016 at 22:47
  • @Abela - Ohh very elegant solution - Thank you so much for your response =) +1 to you!
    – Tarquin
    Sep 13, 2016 at 5:20
1

While you can't put markup within an OPTION element, you can use the CSS ::BEFORE and/or ::AFTER pseudo-elements and give them different styles. For example:

<style>
option::before 
    {content: attr(value) ":"; 
     display:inline-block; padding-right:3px; padding-left:1px;
     font-weight:bold; width:1.6em; text-align:right;}
</style>

<select name=menu multiple size=4>
<option value=1>Hamburger</option>
<option value=2>Cheeseburger</option>
<option value=3>Hot Dog</option>
<option value=4>Fries</option>
</select>

This will create a SELECT element with bolded numbers for each OPTION.

Note: I haven't tried this with all browsers yet, but it should work with all the modern ones.

0

This is more like an answer / workaround to the question closed as a duplicate on other tags rather than styling in particular for <options>.

If you don't mind getting dirty with JavaScript, Select2 provides a very concise way to achieve that. It does use lists for that as well.

Here is HTML

<select id="e1" style="width:300px">
  <option value="AL" data-badge="3">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

And here is CoffeeScript

$("#e1").select2
  theme: "bootstrap"
  templateResult: (data) ->
    badge = $(data.element).data('badge')
    if badge
      return $(document.createTextNode(data.text)).add($('<span class="badge pull-right">').text(badge))
    data.text

And here is JSFiddle.

Rendered result

0
0

Permitted content in the option tag is Text, possibly with escaped characters (like é).MDN doc for more details

0

You can achieve this using react js react-select options as below.

enter image description here

enter image description here

import { useEffect, useState } from "react";
import Select from "react-select";

function App(props) {
  //const options = compliments;
  const [state, setState] = useState({
    rows: [
      {
        rowId: 0,
        config: ""
      }
    ],
    id: 1
  });
  const [configOpts, setConfigOpts] = useState([]);

  const configstyles = {
    control: (styles, { isFocused, isSelected }) => ({
      ...styles,
      backgroundColor: "white",
      borderColor: isSelected ? "yellow" : "grey"
    }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
      ...styles,
      width: "auto"
    }),
    singleValue: (styles, { data }) => ({
      ...styles,
      ":before": {
        borderRadius: 10,
        content: data.label === "Test3" ? '"Red"' : '"Green"',
        color: data.label === "Test3" ? "Red" : "Green",
        display: "inline",
        marginRight: 8,
        height: 10,
        width: 10
      }
    }),
    menu: (styles) => ({
      ...styles,
      width: "max-content",
      minWidth: "100%"
    })
    // Input: (styles) => ({ ...styles, width: "auto" })
  };

  const handleAddRow = () => {
    const newRow = {
      rowId: state.id,
      config: ""
    };
    setState({
      ...state,
      rows: [...state.rows, newRow],
      id: state.id + 1
    });
  };

  const handleRemoveRow = (idx) => () => {
    const rows = state.rows.filter((FilterdRow) => FilterdRow.rowId !== idx);
    console.log("rows", rows);

    setState({
      ...state,
      rows
    });
  };

  const handleConfigChange = (index) => (selectedOption) => {
    console.log("SelectedOption: " + selectedOption.label);
    const rows = state.rows.map((row) => {
      if (row.id === index) {
        return {
          ...row,
          ["config"]: selectedOption.label
        };
      }
      return row;
    });
    setState({
      ...state,
      rows
    });
  };

  useEffect(() => {
    setConfigOpts([
      { label: "Test11111111111111111111111111", value: "Test1" },
      { label: "Test2", value: "Test2" },
      { label: "Test3", value: "Test3" },
      { label: "Test4", value: "Test4" }
    ]);
  }, []);

  return (
    <>
      <table>
        {state.rows.map((item, idx) => (
          <tr key={item.rowId}>
            <td>
              <Select
                options={configOpts}
                onChange={handleConfigChange(item.rowId)}
                styles={configstyles}
              />
            </td>
            <td>
              <button onClick={handleRemoveRow(item.rowId)}>Remove</button>
            </td>
          </tr>
        ))}
      </table>
      <div>
        <button onClick={handleAddRow}>Add</button>
      </div>
    </>
  );
}

export default App;

CodeSandbox

-4

In some cases I could do that by jQuery. Look here: http://jsfiddle.net/rangine/wegx00La/4/

I used a select box for choosing a glyph icon in bootstrap form. but unfortunately this worked only in Firefox.(I don't test it on all browser. in Chrome not works and in IE! I threw it away.

Html:

This code Only works in Firefox.
<br/>
<select id="myselect">
  <option value="_none"> - Select One - </option>
  <option value="asterisk">asterisk</option>
  <option value="plus">plus</option>
  <option value="euro" class="red">euro</option>
  <option value="eur">eur</option>
  <option value="minus" class="green">minus</option>
  <option value="cloud">cloud</option>
  <option value="envelope">envelope</option>
  <option value="pencil">pencil</option>
  <option value="glass">glass</option>
  <option value="music">music</option>
  <option value="search">search</option>
  <option value="heart">heart</option>
  <option value="star">star</option>
  <option value="star-empty">star-empty</option>
  <option value="user">user</option>
  <option value="film">film</option>
</select>
<span class="preview"> </span>

jquery:

(function($) {
  $(document).ready(function() {
    $('#myselect option').each(function() {
      $(this).html('<i class="glyphicon glyphicon-' + $(this).text() + '"></i> ' + $(this).text());
    })

  });
  $('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
  $('#myselect').change(function() {
    $('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');

  });

})(jQuery);

Some CSS:

#myselect {
  margin: 40px;
  height: 30px;
  font-size: 14pt;
}

option.red {
  color: red;
}

option.green {
  color: green;
}

.preview {
  font-size: 20pt;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.