ドロップダウン選択ボックスに代わる純粋な CSS select_html/css_WEB-ITnose

这篇教程中，我将给大家展示表单元素下拉选择框select的CSS替代方案。该方法采用css来实现，看上去非常简单。我们用radio标签列表来模拟下拉列表，选择一个radio可以很好的模拟出select中选择一个元素的效果。

一：HTML

下面是我们在form表单里面用到的html代码：

.代码 

1.   
2.         
     
3.                 
   Choose your beer
     
4.                 
     
   •                         
   •   
   •                                   
   •                                 Cul Dorcha  
   •                         
     
   •                         
   •   
   •                                   
   •                                 Rowers Red Ale  
   •                         
     
   •                         
   •   
   •                                   
   •                                 Belfast Ale  
   •                         
     
   •                         
   •   
   •                                   
   •                                 O'Hara Irish Stout  
   •                         
     
   •                 
     
5.         

II: ロジック スケッチ

説明をより直感的にするために、次のスケッチを描いてみました。明確であることを願っています。フロントエンド UI の共有

3: CSS コード

チュートリアルをより簡潔に見せるために、視覚効果のための CSS コードの一部 (矢印を描画するための CSS など) を省略しました。添付ファイルのバージョン コードで全文を確認してください。同じ理由で、さまざまなブラウザに固有のプレフィックスも省略します。

radio-container css:

.Code

1. radio-container {
2. 位置: 相対
3. 高さ: 4em (内部コンテナの最大高さ) + 1えっと("margin") */
4. }
5. .radio-container:hover {
6. z-index: 9999; }

radio-container css に含まれる要素: フロントエンド UI 共有

.code

.radio-options {

1. 位置: 絶対;
2. 幅: 100%;
3. 遷移: 0.7 秒;
4. コード
.radio-options .toggle {
位置: 相対 ;
パディング: 0.75em;
ボーダー半径: 10px;
9. Zインデックス: 1 ; }
10. * li は .toggle と同じ位置にスタックされ、 .toggle のみが表示されます */

.radio-options li {

位置: 絶対;

左: 0;

幅: 10 0%;

高さ: 100%;

.radio-options ラベル {

不透明度: 0;
遷移: 0;
4. 入力を非表示にするために、display: none を使用して目的を達成できますが、この方法では、一部のブラウザー (一部のモバイル ブラウザーなど) でラベルをクリックしても、関連する入力に焦点が当てられません。フロントエンド UI 共有
.code
7. .radio-options input {
8. 位置: 絶対;
9. 左: 0;
10. 幅: 300px;
11. 高さ: 3em ;
12. 不透明度: 0;
13. z-index:1;
14. カーソル: ポインタ;
16. Four: マウスを上に移動するための CSS コード
上記のコードに従って、次のようにしてみましょうもっと詳しく見る .radio-container の z-index は非常に大きな値であり、.radio-options の max-height 属性も大きくなっています (100em) 続けましょう:
コード
19. 1. /* li 要素には、.radio-options コンテナ内で通常のフローがあります */
    2. .radio-options:hover li {
    3. position: relative; }
    4. .radio-options:hover label {
    5. opacity: 1;  
    6. トランジション: 0.5 秒。 }

    五：选中状態态

    チェックされたオプションをスタイルするには、一般的な兄弟セレクターを使用します。チルダ文字コンビネータ (E ～ F) を使用し、特定の要素の兄弟である要素と一致します。最初の要素 (E) は 2 番目の要素 (F) より前に出現する必要があり、同じ親 (この場合は li 項目) を共有する必要があります。トグルの代わりにそのラベル:

    
    

    .代码
    .radio-options input:checked ~ label {
    position: absolute;  
    トップ: 0;  
    左: 0;  
    右: 0;  
    不透明度: 1;  
    /* は .toggle の上にあるので表示されます */
    z-index: 2;  
    /* .toggle */
    padding: 0.75em; と同じスタイルがあります。  
    背景: ダークグリーン;  
    ボーダー半径: 10px; }
    ホバーすると通常のフローに戻ります
    .radio-options:hover input:checked ~ label {

    位置: 静的;  

    境界半径: 0; }
    3. 六：移動装置上に必要な修正
    原因は我们响应がネズミ标のホバーイベントであるため、必要に応じて移動装置上に必要な修正

    解決策の 1 つは、私たちは最初に独自の modernizr ビルドを使用してデバイスを検出し、次のようなスクリプトを追加しました:

    .代コード

    1. $(document).ready(function(){
    2. if (Modernizr.touch) {
    3. $(".radio-options").bind("click", function(event) {
    4. if (! ($(this).parent('.radio-container').hasClass("active")) {
    5. $(this).parent('.radio-container').addClass("active");
    6. even.stopPropagation();
    });
    8. $(".toggle").bind("click", function(){
    9. $(this).parents('.radio-container' ).removeClass("active");
    return false;
    10. });
    })
    在css中我如下修改每一个:hover的定义： フロントエンドUI分享
    .代码
    .no-touch .radio-container:hover, .active.radio-container {

    z-index: 9999; }

    .no-touch .radio-options:hover, .active .radio-options {
    max-height: 100em;  
    }
    .no-touch .radio-options:hover li, .active .radio-options li {
    位置: 相対; }
    .no-touch .radio-options:hover label, .active .radio-options label {
    opacity: 1;  
    トランジション: 0.5 秒。 }
    ....
    11. 七：IE8下でどのように処理するか
    互換性があるかどうかIE8は自己に基づいて、この部分は本教程の焦点では​​ありません

    .代码

    < ;!--[if (IE 8)]>  

    <スクリプト>  

    $(document).ready(function(){
    $(".radio-options li").bind("click", function() {
    $(this).siblings(".checked") .removeClass("checked");
    2. $(this).addClass("checked");
    });  
      
      
    CSS

    8. .code

       .radio-options .checked label {
       1. 上: 0;
       2. 右: 0;
       パディング: 0.75em;背景: #1b9e4d;
       可視性: 可視;
       z-index: 2; }
       ....
       8. チュートリアルは終わりました、お役に立てば幸いです、ありがとう。