実現したいこと
・フォーム機能 selectのoption要素について、
1.ドロップダウンを開いたときにoptionに上下余白を付けたい。
2.ドロップダウンホバー時の背景色を任意のものに変更したい。
発生している問題・エラーメッセージ
・装飾したい場合、そもそもselect要素を使うべきではないという記事を複数見かけましたが、現在実現できている機能をselect要素以外にドロップダウンで実現できる方法が分かりません。bootstrapセレクト等を使ってみましたが、valueをdata-contentに変えることができずに諦めました。
【現在のプルダウン機能】
・ドロップダウンに「すべて表示、青い服、赤い服、黄色い服」カテゴリーが表示され、それを選んだ瞬間に、記事作成時にそのカテゴリーを選んだ記事の一覧が表示されている一覧ページに遷移します。そのとき、ドロップダウンは選択したカテゴリーが保持されています。
該当のソースコード
<div class="report__form"> <select name="select" onChange="location.href=value;" class="clothes__select"> <option value="<?php echo home_url(); ?>/clothes/">すべて表示</option> <?php $terms = get_terms('custom_clothes'); foreach($terms as $term) { $terms = get_the_terms($post->ID,'custom_clothes'); $slug = $terms[0]->slug; //現在表示されているページと同じカテゴリーの場合「selected」属性を付与する if(is_tax() && $slug == $term->slug){ echo '<option value="'.get_term_link($term->slug,'custom_clothes').'" selected>'.$term->name.'</option>'; }else{ echo '<option value="'.get_term_link($term->slug,'custom_clothes').'">'.$term->name.'</option>'; } } ?> </select> <span class="report__form--triangle"></span> </div>
回答1件
あなたの回答
tips
プレビュー