简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  ドロップダウン選択ボックスに代わる純粋な CSS select_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:58:171381ブラウズ

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

一：HTML

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

.代码 

  1.   
  2.         
      
  3.                 
    Choose your beer
      
  4.                 
        
    •                         
    •   
    •                                   
    •                                   
    •                         
      •   
    •                         
    •   
    •                                   
    •                                   
    •                         
      •   
    •                         
    •   
    •                                   
    •                                   
    •                         
      •   
    •                         
    •   
    •                                   
    •                                   
    •                         
      •   
    •                 
      
  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. コード
      6. .radio-options .toggle {
      7. 位置: 相対 ;
      8. パディング: 0.75em;
      9. ボーダー半径: 10px;
    9. Zインデックス: 1 ; }
    10. * li は .toggle と同じ位置にスタックされ、 .toggle のみが表示されます */
    .radio-options li {

    位置: 絶対;

    左: 0;

    幅: 10 0%;

    高さ: 100%;

    .radio-options ラベル {
      不透明度: 0;
      2. 遷移: 0;
    4. 入力を非表示にするために、display: none を使用して目的を達成できますが、この方法では、一部のブラウザー (一部のモバイル ブラウザーなど) でラベルをクリックしても、関連する入力に焦点が当てられません。フロントエンド UI 共有
      6. .code
    7. .radio-options input {
    8. 位置: 絶対;
    9. 左: 0;
    10. 幅: 300px;
    11. 高さ: 3em ;
    12. 不透明度: 0;
    13. z-index:1;
    14. カーソル: ポインタ;
    16. Four: マウスを上に移動するための CSS コード
      17. 上記のコードに従って、次のようにしてみましょうもっと詳しく見る .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;  
        2. トップ: 0;  
        3. 左: 0;  
        4. 右: 0;  
        5. 不透明度: 1;  
        6. /* は .toggle の上にあるので表示されます */
        7. z-index: 2;  
        8. /* .toggle */
        9. padding: 0.75em; と同じスタイルがあります。  
        10. 背景: ダークグリーン;  
        11. ボーダー半径: 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. });
      8. $(".toggle").bind("click", function(){
      9. $(this).parents('.radio-container' ).removeClass("active");
        10. return false;
      10. });
        11. })
        14. 在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;  
        2. }
        3. .no-touch .radio-options:hover li, .active .radio-options li {
        4. 位置: 相対; }
        5. .no-touch .radio-options:hover label, .active .radio-options label {
        6. opacity: 1;  
        7. トランジション: 0.5 秒。 }
        8. ....
      11. 七：IE8下でどのように処理するか
      互換性があるかどうかIE8は自己に基づいて、この部分は本教程の焦点では​​ありません

      .代码

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

      <スクリプト>  

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

      8. .code

        .radio-options .checked label {
        1. 上: 0;
        2. 右: 0;
          3. パディング: 0.75em;背景: #1b9e4d;
          4. 可視性: 可視;
          5. z-index: 2; }
          6. ....
        8. チュートリアルは終わりました、お役に立てば幸いです、ありがとう。
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：ADFの出力スタイル page_html/css_WEB-ITnose次の記事：ADFの出力スタイル page_html/css_WEB-ITnose

    関連記事

    続きを見る