【解決済み】セレクトボックスの色を初期値だけ変える【Contact form 7】

ブログ ホームページ制作

かなりマニアックなのですが、2時間くらい考えました。

普段は、MW WP Formを使ってるんですが、あれは同じページに2個フォームを設置できませんし、固定ページ内と投稿でしか使えません。
なので、今回の案件では、最新版にも対応してたので、Contact form 7を久々に使う事にしました。

デザインを確認すると、セレクトボックスにプレースフォルダーがあって、おまけに色が違う。

一見簡単そう、出来そうなんですが、やってみると・・・あれ?ってなる事よくある。
今回もまさにそれ。

フォームのセレクトボックスには、プレースフォルダーがありません。

やりたい事

  • セレクトボックスの右のボタンのデザインを変えたい
  • セレクトボックスにプレースフォルダーをいれたい

先ほども言いましたが、プレースフォルダーはないので、デフォルト値をなんとかする方法に最終的には落ち着きました。
順番に解説していきます。

セレクトボックスのデザインを変更する

変更するのは、ボタンの部分です。
このボタンの部分を消して、背景をCSSでいれればOK

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("select_ico.png");
background-repeat: no-repeat;
background-position: 98% center;

こんな感じになります!
これは意外とよく使いますね。

デザイナーの人ここいじりたがるんですよねぇ。
やめてほしい( ;∀;)

ちなみにここらのデザインはあんまり変更しない方が良いと個人的には思います。
理由は、ユーザーにやさしくない。さわりたい気持ちはわかります。ださいんだもんよ・・。

デザイン的には、たしかにダサいんですけど、セレクトボックスだよって教えてあげる方が良い。
なのでデフォルトの状態が一番よく目にするのでここさわるのはほんとやめてくれと思う。
ボーダーくらいにとどめておいてほしい。

まぁボタンだけはさわってもいいと思う。

セレクトボックスをプレースフォルダー風にするやり方

順番的にはこんな感じですかね。

  • セレクトの色を変えておく
  • オプションの色は黒にしておく
  • セレクトボックスの選択が変わった時にCSSで色を変える

1.セレクトの色とオプションの色を変えておきます

selectはcolor:#ccc;
optionはcolor:#000;

これをすることによってあたかもプレースフォルダーのように見えます。
ただこの状態だと選択したあとに黒になってないので、JqueryでCSSを変更します。

2.Jqueryでselectの色を変更する

$(function(){
$('select').on('change',function(){
$(this).css('color',"#000");
})
});

changeのタイミングで色を変更しました。
これでOK

気に入った記事であれば、ぽちっとお願いします<(_ _)>