placeholderをCSSで非表示【コンタクトフォーム7】

先日コンタクトフォーム7でplaceholderをすべて消すという作業がありました。

基本的にはHTMLでplaceholder=”〇〇”を消せばいいだけの話なんですが、zip codeはplaceholderを書いてなくても自動で「住所自動入力」というplaceholderが出てしまうという案件があり、それを無理やり消した方法です。

【CSS】

1. /* どうしても出てしまうplaceholder非表示 */
2. input#zip::placeholder{
3. color: transparent;
4. }

おまめ

placeholderの文字を透明にすれば見えなくなるよね！！

って方法です。

placeholderのCSSは「要素::placeholder」にすると指定できるんですね。

何気にplaceholder自体にCSSをかけたのは初だったので勉強になりました。

おまめ

私が検索したときはplaceholderをCSSで非表示にする方法、全然検索に引っかからなかったので、この記事が誰かの役に立てば光栄です。