CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 7802

Partially Bold Text in an HTML select

I'm not sure if this is even possible, but I have a case where I'd like to bold part (not all) of the text within an option of an HTML select tag.

I tried using b tags, as well as strong tags, with no luck (on Chrome). CSS might work, but since it works at the element level, I'm not sure how to go about it that way.

Is there any way to do this?

Upvotes: 36

Views: 63553

Answers (9)

Jaykumar Gondaliya
Jaykumar Gondaliya

Reputation: 367

using CSS yes it's possible 

   option[value='4']{
    font-weight:bold;
}
/*
Here you can used also :nth of the options that you need to apply specific css like
option:nth-child(1), option:nth-child(4) {
    font-weight:bold;
}
*/
<select>
<option value='1'>first</option>
<option value='2'>Second</option>
<option value='3'>Third</option>
<option value='4'>Fourth</option>
<option value='5'>Fifth</option>
</select>

Upvotes: 0

Zak Noel
Zak Noel

Reputation: 89

Simple solution:

<select>
  <option>Simple</option>
  <option class='bolden'>Bold</option>
  <option>Simple</option>
</select>
<style>
  .bolden{font-family:"Arial Black"}
</style>

Example: https://jsfiddle.net/hnzhbz69/

Upvotes: 1

SuperNova
SuperNova

Reputation: 27466

Bold a nth option in select.

There is no way to do this in css. If still differentiation between options is required, use color, and background.

.diff-option {
   color : grey;
}
.other-options{
   color:white
   background: ...
}

Upvotes: -1

Pritesh
Pritesh

Reputation: 175

since chrome doesn't allow bold font on option tag . you can use text-shadow property like

text-shadow: 0px 0px 0px black;

it will give same appearance of bold and work on all the browsers

Upvotes: 11

Guru110
Guru110

Reputation: 129

I think its too late but this thing worked for me. Apply the property 'font-weight: bolder' to the option tag to make text within it bold without using any html tags.

<option value="optionValue" class="bold-option">
.bold-option{font-weight: bolder;}

Upvotes: 1

Mystic
Mystic

Reputation: 25

Well, you can use the <strong> or <b> in firefox, but it won't work in Chrome or in IE (not cheked any other)

Upvotes: -2

Moses
Moses

Reputation: 9173

No, this is not possible. You have two options here:

1) Use the <optgroup> to create a descriptive header for what you're doing (unlikely this will help).

2) Simulate a drop-down menu by using JavaScript. I'm not sure, but I think jQuery UI might have a drop-down menu script.

Upvotes: 8

SLaks
SLaks

Reputation: 887489

No; it's not possible.

Instead, you can make a fake dropdown list using Javascript.

Upvotes: 40

nyanev
nyanev

Reputation: 11519

Try to wrap the text with <span id="wrap">Some text</span> in css do this #wrap {font-weight: bold}

Upvotes: -6

Related Questions