浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】onsenuiでplaceholderの装飾が二重に表示される

【今回起きた問題】

今回はメールアドレスやパスワードを入力する時のガイド役として

知られるplaceholderの装飾を変更する記事を載せます。

普段は特殊な装飾もしないので深く考えずに実装してしまうことも多いのですが

onsenuiでこのプレースホルダーを::placeholderで定義して擬似要素として使うと

JSX側で定義したplaceholderと::placeholderで定義したplaceholder二つが残像のように

なって表示されてしまうバグが起こりました。

本来ならJSX側で定義したplaceholderが擬似要素::placeholderの要素に

沿って変更されるのですがなぜかそれぞれが独立して表示されてしまう

という理解しがたい現象に見舞われ若干パニックに・・・。

 

【解決方法】

developツールでdivで囲ったplaceholderを表示している要素を見ると

onsenuiで実装したplaceholderの設定を変えるには::placeholderとは別に

.text-input–material__labelというプロパティを追加する必要があることがわかりました。

なのでこれを以下のようにして追加します。

JSX

</pre>
<div id="sample-page">

<Input float type="email" value={this.state.mailaddress}

onChange={(event) => { this.setState({mailaddress: event.target.value})} }

placeholder='メールアドレス' />

</div>
<pre>

 

CSS


#sample-page .text-input--material__label{
color: #fff;
opacity:0;
}

 

テキストカラーをテキストボックスの背景と同じ色(白色)にして

目立たなくし、更にopacityを0に設定して透過することで消えたように

見せます。

onsenuiのinputのプロパティの一つであるmodifier=”material”を設定していなくても

.text-input–material__labelの定義が必要になってくるので留めておきたいと思います。

 

以上になります。

今回はonsenuiでinput要素のplaceholderを定義する際に必要なプロパティが欠けている

ことで起きる不具合について書きました。御清聴ありがとうございました。

 

 

  • この記事いいね! (0)