2012-01-31 10 views
9

ドロップダウンリストで、特定の項目を「強く/太字に」する必要があります。css選択ドロップダウン太字で<option>の

どうすればいいですか?

私が理想的に必要とするものの例:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option> 
+0

optgoupsで解決するか、 "偽の" js/CSSベースのドロップダウンを作成する - また、可能な複製:http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a -html-select – Hannes

答えて

5

あなたは使用することができ:nth-child(N)

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

デモ:http://jsfiddle.net/Sotiris/sqshN/

これも動作しますhttp://reference.sitepoint.com/css/pseudoclass-nthchild

+6

これはありがたいです...素晴らしいですが、Chromeでうまく動作しません。(Firefoxの場合) – user991830

+2

@ user991830は、 'option'要素の太字をサポートしていませんが、擬似クラスが機能します。 http://jsfiddle.net/sqshN/1/ – Sotiris

+0

[Windows] OSes APIを使用しているため、Chromeは決してドロップダウンスタイルを許可していません。私は似たようなことを達成しようとするときのような不一致を思い出します。 – lpd

26

あなたが実際にすることはできません。あなたはまた、独自のものを構築することができます enter image description here

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

最も近いもの(あなたが大胆な項目を選択することはできません)あなたにこれを与え

<optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
    <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </optgroup> 

に入力タグは入力されません(あなた自身の入力を使用する必要があります)。

+1

+1私は「あなたは実際にはできない」(@Sotirisによる回答を参照)とは言いませんが、これは実際にグループ化を使用するように見えるので、これは質問者の質問に最も適した答えだと思いますすべてのブラウザでうまくいかない場合、私にとっては –

+0

@MyHeadHurtsで始まります。私はそれを使用しません。ウェブ開発者としてtatのように考える必要があります。 –

+0

私はほとんどのレベルでそれに同意しますが、私はクライアントがサポートしたいと思っている距離をクライアントに定義させてもらいます。また、それを実現する2.0の方法があるでしょう - 少なくとももっと長く巻き込まれた –

-1

(Firefoxの50とChrome 55で、この擬似クラスのためのより多くの情報とブラウザのサポートを探します)。アイテム3と5は太字で表示されています。

<style> 
    .bld {font-weight:bold;} 
    </style> 
    <select> 
    <option value = 1>Kanakangi 
    <option value = 2>Ratnangi 
    <option class = bld value = 8>Hanumatthodi 
    <option value = 9>Dhenuka 
    <option class = bld value = 15>Mayamalavagowla 
    <option value = 16>Chakravaaham 
    </select> 
+0

それは動作しません。 –

+0

これは動作します。ただ最初にテストしてください。 –

0

jQueryで行うことができます。

$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text")); 

太字にするオプションを明らかに決定するロジックを追加する必要があります。

関連する問題