1

これをやりたい

ここに画像の説明を入力してください

これはフォームの選択ドロップダウンです

私のコードは

HMTL

<select>
                        <option>Country</option>
                        <option>India</option>
                        <option>USA</option>
                    </select>

Css

select{
    width:197px;
    height:45px;
    border:solid 1px #13669b;
    box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
    background:rgba(256,256,256,0.7);
    color:#13669b;
    font-size:16px;
    font-family: 'LatoBold';
    padding:0 14px;
    line-height:45px;
}

私はこれだけ純粋なcssにしたいです。どのように？

4

4 に答える 4

2

純粋な css でそのようなドロップダウン ボックスを作成する方法は (まだ) ありません。

独自の js/css ドロップダウン プラグインを作成するか、すでに利用可能な多くの jQuery/css プラグインのいずれかを使用できます。

于 2012-06-12T08:15:53.717 に答える
1

簡単なクロスブラウザの方法があるかどうかはわかりませんが、CSS + jQuery を組み合わせれば、使用中のすべてのブラウザで動作させることができます。

方法についてはチュートリアルを参照し、必要な外観に合わせて CSS を変更してください。

スクリーンショット:

ここに画像の説明を入力

于 2012-06-12T08:12:02.410 に答える
0

ドロップダウンはブラウザーごとに異なる方法で実装されており、スタイリングは広くサポートされていません。これには理由があります。1 つは、iPad/iPhone のドロップダウンを検討することです。デスクトップ アプリケーションのドロップダウンとは根本的に異なる動作をします。

スタイル付きのドロップダウンが必要な場合は、リストと JavaScript を使用して自分で作成する必要があります。または、これに利用可能な多数のライブラリのいずれかを使用します (これは、純粋な CSS ソリューションが利用できないことをさらに証明しています)。

于 2012-06-12T08:47:06.047 に答える
0

このソリューションは純粋な CSS で動作しますが、Chrome 関連です。次の例を参照してください。

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

-webkitプレフィックスを Firefox ブラウザーと互換性があるものに置き換えようとはして-mozいませんが、実際にはうまくいくかもしれません。試してみてください。

于 2012-06-12T08:37:45.503 に答える