select周りの便利帳（Contact Form7含む）

WordPressの問い合わせで使われる Contact Form7ですが、
selectで入力が面倒なときにコピペで使える入力まとめ。

コピペ利用と注意事項

以下をコピペして使う場合の注意事項です。

必須項目にしたい場合はselectの後ろに*をつける　
→　select*
一番最初にブランク項目を設定したい場合「include_blank」を
任意の名前の後に入れる。
→　select pref include_blank
class名を追加したい場合
→　select pref class:クラス名

都道府県

[select pref（任意の名前） "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]

西暦

 [select year（任意の名前） "1920" "1921" "1922" "1923" "1924" "1925" "1926" "1927" "1928" "1929" "1930" "1931" "1932" "1933" "1934" "1935" "1936" "1937" "1938" "1939" "1940" "1941" "1942" "1943" "1944" "1945" "1946" "1947" "1948" "1949" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005" "2006" "2007" "2008" "2009" "2010" "2011" "2012" "2013" "2014"]年

月

[select month "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]

日

[select day（任意の名前） "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日

selectのブランク項目周り

ブランク項目の文言設定

WordPressのContact Form7で最初の項目をブランクにして
「選択してください」を表示させたい場合
以下のコードを利用すれば自由な文字に変えられます。

// Contact Form 7 の空項目を変更する
function empty_contact_form($html){
	return str_replace('---','設定したい文言を入力',$html);
}
add_filter('wpcf7_form_elements', 'rmpty_contact_form');

詳しくはこちらのサイトに記載されてました。

最初の項目の文字色変更

これはWordpress以外でも活用できます。
簡単に制限なく利用できるので、jQueryを利用した方法を記載します。
その他、詳しくはこちらのサイトに記載しておりましたので
詳しく見たい方はこちらのサイトをご確認ください。

以下のjQueryを使うにはselectタグに「is-empty」というクラス名をつけてください。

jQuery

jQuery(function($){
  const Target = $('.is-empty');
  $(Target).on('change', function(){
    if ($(Target).val() !== ""){
      $(this).removeClass('is-empty');
    } else {
      $(this).addClass('is-empty');
    }
  });
});

CSS

select.is-empty { color: #任意のカラー;}