Styling Options in Bold

css select dropdown bold on some option 's

you could use :nth-child(N)

option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}

Demo: http://jsfiddle.net/Sotiris/sqshN/

Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild

Styling options in bold

IE doesn't allow styling of <option> elements independently. This is because IE uses a Windows form control to render the select box, which doesn't support this feature.

(as an aside, this is the same reason that IE's select boxes can have issues with layering when you put them behind other objects; the form control is being rendered by the Windows OS, not by the browser, so the browser has less control over it than most other elements on the page)

Other modern browsers do allow you to do it, as they render their own select boxes rather than deferring to the OS.

How do I style this text to be bold?

You can use CSS to achieve this using the font-weight property.

<center style="color: black; font-weight: bold;">
Free Shipping & Returns
<center>

How to style the option of an html select element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

CSS different font for styles that make text bold

Common tags like b, strong and headings are styled by the browsers default stylesheet. You have to overwrite them by your own.

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
font-weight: normal;
}

How can I style texarea with some bold italic code functions?

So for the there are lots of js libraries out there.

One of them and I think the best of them is CKeditor.js.

You can find it here :)

How can I let the disable option being bold and black at select html?

try this..

<select id="commentType" name="commentType" required="true">

<option value="Please Select" disabled selected style="font-weight:bold;color:black">Please Select</option>
<option value="Bonus Point">Bonus Point</option>
<option value="Car Park">Car Park</option>
<option value="Gift">Gift</option>
<option value="Promotion">Promotion</option>
<option value="Technical Support">Technical Support</option>
<option value="Others">Others</option>

</select>

How to change font to bold for some words in Select2

You can accomplish it this way. Use templateResult to modify option text as select2 gets created:

HTML:

<select id="select2" style="width:300px">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
</select>

JS:

$('#select2').select2({
templateResult: formatOutput
});

function formatOutput (optionElement) {
if (!optionElement.id) { return optionElement.text; }
var $state = $('<span><strong>' + optionElement.element.value + '</strong> ' + optionElement.text + '</span>');
return $state;
};

Working fiddle: https://jsfiddle.net/18dzrhgx/1/



Related Topics



Leave a reply



Submit