1

私はこの振る舞いをしようとしています。

リストボックス (またはコンボボックス) がある場合、最初の要素 (「1 つ選択」など) には特定のスタイルが必要です。

この（テスト）コードでは：

<style type="text/css">
 .testX {font-style: italic;}
</style>

(...)

<select name="name" id="id">

<option class="testeX" selected="selected" value="#">
    <p class="testX">Choose One</p>
</option>
<option value="TestValue">
    TestValue
</option>

listBox を展開すると Firefox でこの動作が見られますが (Chrome ではそうではありません)、[1 つ選択] を選択すると、フィールドに (イタリック) スタイルがありません。

これどうやってするの？HTML、CSS、またはもっと必要なもの（jQueryなど）でのみこれを行うことは可能ですか?

ありがとう。

4

7 に答える 7

2

HTML4 では、OPTION子要素を持たないプレーンな文字データである PCDATA のみを含むことができます。文字が解析されます (エンティティなど)。

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION

HTML5 の時点では、 内ではテキスト コンテンツのみが許可されていOPTIONます。

http://dev.w3.org/html5/spec/the-option-element.html

つまり、無効な HTML を使用しているため、どのブラウザでもほとんど解析できません。実際、タグ内に HTML 要素を表示できる単一のブラウザーを知りませんでしたOPTION。(…この質問を読むまでは…)

于 2012-09-17T11:46:15.203 に答える
2

疑似要素「first-child」を使用してみてください

 <style type="text/css">
       select#id option:first-child {font-style: italic;}
 </style>

また、段落タグはタグ内に属しておらず<option>、プレーン テキストを含める必要があります。

<option>ただし、タグのスタイルは制限されており、すべてのブラウザがサポートしているわけではありません。背景色など、他のタイプのスタイルの方がうまくいくかもしれません。<select>または、JavaScript とカスタム HTML を使用して、通常のボックスと同じ動作をシミュレートします。

于 2012-09-17T11:39:23.013 に答える
2

フォーム要素はスタイリングが難しいことで有名であり、多くの要素はブラウザーや OS 間で一貫性を保つことがほぼ不可能です。私のアプローチは常に、javascript (通常は jQuery) を使用してフォーム要素を非表示にし、div と span を使用して同様のものを構築することでした。そうすれば、スタイリングに関しては無限大です。

ただし、その異なるスタイルが 100% 必要かどうかを自問する必要があります。標準的なフォーム要素から逸脱することは、優れたユーザビリティではありません。

于 2012-09-17T11:40:04.400 に答える
1

このCSSを使用する

select { font-style: italic;   }

select option  {
  font-style: normal;  
}

select option:first-child {
  font-style: italic;  
}

jsFiddleの例
しかし、残念ながら、このスタイルはFirefoxにのみ適用されます

于 2012-09-17T11:41:11.980 に答える
1

他の人がすでに指摘しているように、マークアップは無効であり、ブラウザ間で一貫したネイティブフォーム コントロールを取得することは、非常に困難から不可能の間の規模です。

私の意見では、1 つまたは複数のライブラリやプラグインを含めることによるページの重みのオーバーヘッドを気にせず、JS 以外の<select>あまりきれいに見えません。

利用可能な多くの<select>代替 jQuery プラグインの中で、Select 2 プラグインを強くお勧めします。それに応じてスタイルを設定できるコントロールへのプレースホルダー テキストの追加を既にサポートしている豊富な機能セットがあります。

于 2012-09-17T11:52:06.000 に答える
1

斜体は chrome と Opera では適用されません。plz チェックhttp://www.electrictoolbox.com/style-select-optgroup-options-css/

オプションの任意のデザインを提供できます。

<select name="name" id="id">
    <option style='font-style: italic; font-weight:bold;' selected="selected" value="#">
        <span>Choose One</span>
    </option>
    <optgroup label="Option group 1">
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
    </optgroup>
</select>

CSS:

select option {
    background: none repeat scroll 0 0 #E5E3E3;
    border: 1px dotted #CCCCCC;
    height: 15px;
    line-height: 15px;
    text-indent: 3px;
    text-transform: capitalize;
    z-index: -9999; 
}
optgroup { /* Change font style and text alignment */
    font-style:italic;
    text-align:right;
}
于 2012-09-17T12:07:44.890 に答える
0

すべてのブラウザーがタグ内の HTML タグをサポートしているわけではありません<option>。

于 2012-09-17T11:36:32.570 に答える