web-dev-qa-db-ja.com

選択ボックス内のテキストを縦に並べたい

選択ボックス内のテキストを垂直方向に揃えたい。使ってみた

select{
   verticle-align:middle;
}

ただし、どのブラウザでも機能しません。 Chromeは、デフォルトで選択ボックスのテキストを中央に揃えているようです。 FFは上部に揃え、IEは下部に揃えます。これを達成する方法はありますか？ UIBinderでGWTのSelectウィジェットを使用しています。

これは現在私が持っているものです：

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

ありがとう！

cssgwtselectvertical-alignment
64
datauser

おそらく最良のオプションは、上部のパディングを調整し、ブラウザー間で比較することです。完全ではありませんが、できる限り近いと思います。

padding-top:4px;

必要なパディングの量は、フォントサイズによって異なります。

ヒント：フォントがpxに設定されている場合は、pxにもパディングを設定します。フォントがemに設定されている場合は、emにもパディングを設定します。

編集

これらは、あなたが持っていると思うオプションです。なぜなら、垂直アラインはブラウザ間で一貫していないからです。

A.高さ属性を削除し、ブラウザに処理させます。これは通常、私に最適です。

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

B.テキストをプッシュダウンするためにトップパディングを追加します。 （一部のブラウザで矢印を押し下げました）

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

C.フォントのサイズを大きくして、選択した高さをもう少し良くしようとすることができます。

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>
48
user401183

Firefoxでサイズが選択された要素のテキストを垂直方向に揃えているように見えるこのcssプロパティのセットを見つけました。

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

ただし、IE8ではテキストがさらに下に押し出されます。 box-sizingプロパティをborder-boxに戻しても、少なくともIE8が悪化することはありません（FFは-moz-box-sizingプロパティを引き続き適用します）。 IEの解決策を見つけるのは良いことですが、息を止めていません。

編集：これをニックスします。テスト後は機能しません。しかし、興味のある人にとっては、この問題は、入力および選択要素に影響を与えるFFのforms.cssファイルの組み込みスタイルに起因するようです。問題のプロパティはline-height：normal！importantです。上書きすることはできません。私はもう試した。 Firebugの組み込みプロパティを削除すると、テキストがかなり垂直に中央揃えされたselect要素が得られることがわかりました。

19
Shelly Skeens

私の解決策は、このようにFirefoxをターゲットにした選択のためにパディングトップを追加することです

// firefox vertical aligment of text
@-moz-document url-prefix() {
    select {
        padding-top: 13px;
   }
}
10
adam187

私はまさにこの問題に遭遇しました。私の選択オプションはWebkitの中央に配置されていましたが、ffはデフォルトで上部に配置されていました。周りを見回した後、私は本当に面倒な作業を作成したくありませんでしたが、最終的には私の問題を解決しませんでした。

解決策：Javascript。

if ($.browser.mozilla) {
            $('.styledSelect select').css( "padding-top","8px" );
        }

これにより、問題が非常に正確に解決されます。ここでの唯一の欠点は、私がjQueryを使用していることです。プロジェクトでjQueryをまだ使用していない場合は、jsライブラリを一時的に含めたくない場合があります。

注：どうしても必要な場合を除き、jsでスタイルを設定することはお勧めしません。 CSSは常にスタイリングの主要なソリューションである必要があります。jQueryを（この特定の例では）「緊急の場合は中断」というラベルの付いたasと考えてください。

* UPDATE*これは古い投稿であり、人々がまだこのソリューションを参照しているように見えるため、（コメントで述べたように） 1.9以降、この機能はjQueryから削除されました。 ブラウザスニッフィングの代わりに Modernizr を実行するプロジェクト機能検出を参照してください。

4
Scott Sword

これまでのところ、これは私のためにうまく機能しています：

line-height: 100%;
2
user3403273

この問題が発生しただけですが、モバイルデバイスの場合は、主にmobile firefoxです。私にとってのコツは、高さ、パディング、行の高さ、最後にボックスのサイズ変更をすべて定義することでした選択要素。ここではサンプル番号を使用しませんが、サンプルのために：

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
2
asherrard

行の高さと高さを同じピクセル数に設定するだけで、最も一貫した結果が得られることがわかりました。 「最も一貫性のある」とは、最適な一貫性を意味しますが、もちろん、ブラウザー間で100％「ピクセル完璧」ではありません。さらに、Firefox（v。17.x）では、ドロップダウン矢印に対して右側にオプションテキストが密集する傾向があることがわかりました。 OPTION要素のみに少量のパディング権を設定することでこれを軽減しました。この設定は、IE 7-9の外観には影響しません。

私の結果：

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

注-私のSELECT要素は10pxの小さなフォントを使用しています。明らかに、特定のUIコンテキストに応じて比率を調整する必要があります。

1
code-sushi

私は次のように試しましたが、うまくいきました：

select {
     line-height:normal;
     padding:3px;
}
1
Ted

「line-height」属性を設定してみてください

このような：

select{
    height: 28px !important;
    line-height: 28px;
}

ここに、この属性に関するドキュメントがあります。

http://www.w3.org/wiki/CSS/Properties/line-height

http://www.w3schools.com/cssref/pr_dim_line-height.asp

0
AndreaRivadossi

私は同じ問題を抱えており、何時間も取り組んでいます。私はついに機能する何かを思いついた。

基本的に、選択ボックスの上に最初のオプションのテキストを複製し、実際の最初のオプションを空白のままにするdivを配置するまで、私はあらゆる状況で動作しませんでした。 {pointer-events：none;}を使用して、ユーザーがdivをクリックできるようにしました。

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}
0
Adam Ulivi
display: flex;
align-items: center;
0
Victor Bredihin

あなたが与えることができます：

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

親には、position：relativeを指定する必要があります。それが動作します。

0
puja

これはFirefox Nightlyで修正され、次のfirefoxビルドに含まれる予定です。

詳細については、このバグを参照してください https://bugzilla.mozilla.org/show_bug.cgi?id=6107

0
lukefrake

以前はheightとline-heightを同じ値で使用していましたが、インターウェブ間で一貫性がないことが判明しました。私の現在のアプローチは、そのようにパディングとそれを混ぜることです。

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

padding + text-alignの代わりに、水平値にwidthを使用することもできます

0
Jason Lydon

padding-topを追加するだけで、右側の灰色のドロップダウン矢印ボックスが押し下げられることがわかりましたが、これは望ましくありませんでした。

私のために働いた方法は、インスペクターに入り、テキストが中央にくるまでpaddingを追加することでした。これにより、ドロップダウンアイコンのサイズも小さくなりますが、中央に配置されるため、視覚的に邪魔になりません。

0
laurencedorman