bold text in <select> list

Dear people I am doing a list of card games and in some cases I would want the second name to be in bold.

http://gjallur.net/galdur/Cards1.htm

Is there a way to do that? I tried it with <b></b> tags but that does not work.

<select>
<option value="90"> Manni </option>
<option value="91"> Manni - Haraldarmanni </option>
<option value="93"> Manni - Hornafjarðarmanni </option>
<option value="94"> Manni - Laugarvatnsmanni </option>
<option value="92"> Manni - Trjámann </option>
</select>

Answers


What you ask is impossible! Because select element is rendered by the OS and not HTML. It cannot be styled via CSS. So you have to think alternative .I thought to create a dropdown from <ul> list and <li> options.So I created this one bellow: http://jsfiddle.net/csdtesting/ks09u3kd/ .And now YES you have can whatever option you want in whatever style!

DROPDOWN WITH UL AND LI AS HTML SELECT ELEMENT

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };

  $(document).on('click.dropdown touchstart.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);
.dropdown {
  float: left;
  position: relative;
  width: 200px;
  padding: 5px;
  margin-right: 10px;
  background: #ccc;
}
.dropdown a {
  display: block;
  text-decoration: none;
  color: #333;
}
ul.dropdown-menu li:nth-child(2) {
  font-weight: bold;
}
/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
}
/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;
}
/* options */

.dropdown-menu .option a {
  padding: 5px;
}
.dropdown-menu .option a:hover {
  background-color: #aaa;
}
/* open */

.dropdown-open {
  z-index: 400;
}
.dropdown-open > .dropdown-menu {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSelect" class="dropdown">
  <a href="#options" class="dropdown-toggle">Manni </a>
  <ul class="dropdown-menu">
    <li class="option"><a href="#">Manni - Haraldarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Hornafjarðarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Laugarvatnsmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Trjámann</a>
    </li>
  </ul>
</div>

If we were to code what you ask in pure JS: FIDDLE

<div id="fakeSelect">
    <div id="selectBox"></div>
    <ul id="selectOptionsBox">
        <li>Manni</li>
        <li>Manni - Haraldarmanni</li>
        <li>Manni - <b>Hornafjarðarmanni</b></li>
        <li>Manni - Laugarvatnsmanni</li>
        <li>Marglita hálfmáninn</li>
        <li>Marglita klukkan</li>
        <li>Marías</li>
        <li>Mausel</li>
        <li>Málverkasafnið</li>
        <li>Mexíkanskur veltipóker</li>
        <li>Miklar hindranir</li>
        <li>Monte Carlo</li>
    </ul>
</div>

#fakeSelect {
    user-select: none;
    -webkit-user-select: none;
}
#selectBox {
    width: calc(200px - 4px);
    border: 1px solid silver;
    padding: 2px;
    cursor: default;
    font: 13px Arial, sans-serif;
    position: relative;
}
#selectBox:hover {
    border: 1px solid gray;
}
#selectBox::after {
    position: absolute;
    content: "▼";
    font-size: .8em;
    right: 5px;
    top: 5px;
}
#selectOptionsBox {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    border: 1px solid silver;
    border-top: none;
    overflow: auto;
    height: 150px;
    cursor: default;
    font: 13px Arial, sans-serif;
    display: none;
}
#selectOptionsBox li {
    padding: 2px;
}
#selectOptionsBox li:hover {
    background: gainsboro;
}

var selectBox = document.getElementById("selectBox");
var selectOptionsBox = document.getElementById("selectOptionsBox");
var selectOptions = selectOptionsBox.getElementsByTagName("li");

selectBox.innerHTML = selectOptions[0].innerHTML;

selectBox.onclick = function() {
    if (selectOptionsBox.style.display != "block") {
        selectOptionsBox.style.display = "block";
    } else {
        selectOptionsBox.style.display = "none";
    }
}
window.onclick = function(e) {
    if (e.target != selectBox &&
        selectOptionsBox.style.display == "block") {
        selectOptionsBox.style.display = "none";
    }
}

for (var i = 0; i < selectOptions.length; i++) {
    (function(i) {
        selectOptions[i].onclick = function() {
            selectBox.innerHTML = this.innerHTML;
        }
    })(i);
}

Need Your Help

ObjectAnimator Choppy Scrolling

java android scrollview horizontalscrollview objectanimator

I have an activity that contains a HorizontalScrollView. The HorizontalScrollView has three fragments in it. On a button click the scrollview will scroll from left to right or vice versa. I am

Jenkins Multibranch Pipeline - GitHub Enterprise Issues?

jenkins jenkins-pipeline

I have spent days troubleshooting/researching this issue. I can't seem to figure out what's going on here. I'm trying to setup a multibranch pipeline project pointed at our internal GitHub enterprise