web-dev-qa-db-ja.com

選択ボックスのパディング

選択ボックスをcssでスタイリングするのは少し面倒ですが、高度な技術に頼らずに、右側の矢印にパディングを追加せずにテキストを少し押し下げるためにパディングを追加することはできますか？

csspaddinghtml-select
10
Brett

これをCSSクラスに追加します。多分これは役立ちますか？

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
20
Demilio

selectボックスはブラウザ、特にオペレーティングシステムによって表示が異なるため、一貫性を保証することはできません。

たとえば、Macで実行できるフォーマットの最小量は次のとおりです。

select { height:40px; background:transparent; }

そしてそれはこのように見えます：

Select Box

4
redolent

@Demilioの答えは、デフォルトの選択ボックスを非表示にするのに最適です。カスタムスタイルを使用すると、必要に応じて選択ボックスの外観を変更できます。

残っている唯一の問題は、@ romainnmで言及されているように、矢印/キャレットもなくなっていることです。

残念ながら、疑似要素（例：after）はselect要素では機能しないため、それを回避する唯一の方法は、<div class="Caret"></div>のような実際の要素をselectの後に作成することです。

いくつかのスタイリングを追加します。

.Caret {
  display: block;
  position: absolute;
  cursor: pointer;
  right: 1rem;
  top: 50%;
  margin-top: -1px;
  width: 0;
  height: 0;
  border-top: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

これにより、矢印の付いたカスタムスタイルの選択ボックスが作成されます。

enter image description here

残念ながら、唯一の欠点は、矢印をクリックしても選択ボックスが開かないことです。また、JavaScriptで対処することもできないようです。

2
Adam Reis

ここで興味深いテスト http://cssdeck.com/labs/styling-select-box-with-css

作成者は右側の矢印をカバーし、ベンダープレフィックスのcssを使用してさまざまなブラウザをターゲットにして独自の矢印を作成しました。それを行った後、あなたのパディングはすべて無料です。

0
commonpike