1

オプションが異なるグループにあるため、異なるサイズのドロップダウンを実行しようとしています。

テキストの色、背景の色は変更できますが、オプションの高さやフォントサイズは変更できません (つまり、変更できますが、2 つの別々のものはありません)。

コード

<select>
    <option class="title" disabled>Title 1</option>
    <option>Select 1</option>
    <option>Select 2</option>
    <option class="title" disabled>Title 2</option>
    <option>Select 3</option>
 </select>

CSS

select .title
{
    color:#E0E0E0;
    font-size:12px;
    font-weight:bold;
    height:15px;
    background-color:#0000FF;
}

select option
{
    color:#0000FF;
    font-size:24px;
    font-weight:normal;
    height:30px;
    background-color:#0000FF;
}
4

3 に答える 3

3

<optgroup>このようなもののために特別に呼ばれる要素を知っていますか？

<select>
     <optgroup label="Title 1">
       <option>Select 1</option>
       <option>Select 2</option>
     </optgroup>
     <optgroup label="Title 2">
        <option>Select 3</option>
     </optgroup>
</select>

そして、テキストサイズを変更したい場合は、これをoptgroup試してください

optgroup:before {
    content: "Demo";
    font-size: 18px;
}

OPTGROUPヘッダーフィドルのサイズを変更する

于 2012-11-22T14:55:11.690 に答える
0

これが私がやった方法です

HTML

<select>
 <optgroup label="Title 1"></optgroup> 

  <option>Select 1</option>
  <option>Select 2</option>

   <optgroup label="Title 2"></optgroup>

   <option>Select 3</option>
 </select>

CSS

select
{
 width: 100%;
 font-size:24px;
}
select optgroup 
{
 color:#E0E0E0;
 font-size:12px;
 font-weight:bold;
 background-color:#0000FF;
}
select option
{
 color:#0000FF;
 font-weight:normal;
 background-color:#FFFFFF;
}

高さは機能していません。

于 2012-11-22T15:14:24.683 に答える
0

残念ながら、スタイルは多くのフォーム要素でかなり制限されています。<option>タグはいくつかの変更されたスタイルを持つことができますが、font-size はそれらの 1 つではありません。また、使用しているブラウザによっても異なります。

可能なことの概要については、このページを参照してください: http://www.electrictoolbox.com/style-select-optgroup-options-css/

于 2012-11-22T15:01:46.557 に答える