[!]本題迄飛ばしたい方はこちらから
当事務所サイトの編集を担当している監査課の田中でございます。
私がWeb担当をする様になって約1年。Webに関しては元々素人(※)であり、現在も会計事務所業務の副業としてWebを編集しているのみでありWeb専門ではございません。
しかしそんな私でも(言語の勉強という形では一切しておりませんが)既存のソースに手を加える形で覚えて来た事により多少は知識が付いてきました。
とはいえど対処療法的な編集をしている事、廃止された要素でも現在表示されていればあまり気にせず使っている
(というかソースに不整合があってもちゃんと表示されればあまり気にしておりません←)事、ｺﾝﾃﾝﾂ管理ｼｽﾃﾑ特有の制約がある事(*)、そして私自身の持ち合せているセンス等から決して綺麗なソースではございませんが…
私も初心者につき解説中に誤りのある可能性がございますがご了承願います。
監査課 田中
当事務所サイトの編集を担当している監査課の田中でございます。
私がWeb担当をする様になって約1年。Webに関しては元々素人(※)であり、現在も会計事務所業務の副業としてWebを編集しているのみでありWeb専門ではございません。
|
※
|
htmlでいえばa要素やbrタグ等を知っている程度、CSSに関しては殆ど無知、JSに関してはJavaとは(名前が似ているだけで)異なる事を知っている程度でした。
|
しかしそんな私でも(言語の勉強という形では一切しておりませんが)既存のソースに手を加える形で覚えて来た事により多少は知識が付いてきました。
とはいえど対処療法的な編集をしている事、廃止された要素でも現在表示されていればあまり気にせず使っている
(というかソースに不整合があってもちゃんと表示されればあまり気にしておりません←)事、ｺﾝﾃﾝﾂ管理ｼｽﾃﾑ特有の制約がある事(*)、そして私自身の持ち合せているセンス等から決して綺麗なソースではございませんが…
|
*
|
逆に、(BLOG以外は)PC版ｽﾏﾎ版共通設定で編集していても要素にstyleを直接ぶら下げるとｽﾏﾎ版では無視、class指定して記述すると双方に適用されるなどその制約を逆手(?)に取って上手く使えば便利な面も多いです。尤も、当CMSの根幹であるphpの知識に欠けているので本質的には理解し切れておりませんが…
|
さて本題。
表題の通り、当事務所サイトの推奨閲覧環境であるGoogle Chromeでフォームへの入力時、オートコンプリート時に原則として背景色が黄固定となってしまいますね。
私もそこを変更しようと思って軽く検索してみたところ、user agent stylesheetでinput:-webkit-autofill, textarea:-webkit-autofillのスタイルが定義されており、CSSでそれらを(!importantを使う等)上書きしようとしても既知の通り動作しない事から-webkit-box-shadow: 0 0 0 1000px [任意の色] inset;で巨大な影を付けてしまう方法が一般的なようでした。
ところが当サイトではもう少し別な挙動をさせたかった為探っていたところ、animationを@keyframesで定義する形でinput:-webkit-autofill, textarea:-webkit-autofillのスタイルを指定すると適用されることが分かりました。(既出かもしれませんが…)
以下、参考までにソースを記述しておきます。初心者である私が、在ると分かり易いと思った解説を表 示非表示。
[山括弧]部は任意のスタイルに置き換えて下さい。尚その際は[]を消し忘れない様お気を付け下さい。(×[red] 〇red)
表題の通り、当事務所サイトの推奨閲覧環境であるGoogle Chromeでフォームへの入力時、オートコンプリート時に原則として背景色が黄固定となってしまいますね。
私もそこを変更しようと思って軽く検索してみたところ、user agent stylesheetでinput:-webkit-autofill, textarea:-webkit-autofillのスタイルが定義されており、CSSでそれらを(!importantを使う等)上書きしようとしても既知の通り動作しない事から-webkit-box-shadow: 0 0 0 1000px [任意の色] inset;で巨大な影を付けてしまう方法が一般的なようでした。
ところが当サイトではもう少し別な挙動をさせたかった為探っていたところ、animationを@keyframesで定義する形でinput:-webkit-autofill, textarea:-webkit-autofillのスタイルを指定すると適用されることが分かりました。
以下、参考までにソースを記述しておきます。初心者である私が、在ると分かり易いと思った解説を表 示非表示。
[山括弧]部は任意のスタイルに置き換えて下さい。尚その際は[]を消し忘れない様お気を付け下さい。(×[red] 〇red)
<style type="text/css">
<!--
/*
ここより上は重複して設置する必要性は無い
(例△
◎
*/
@keyframes [任意のｱﾆﾒｰｼｮﾝ名]onamae {
0% {background: [任意のスタイル]red;}
}
/* ここより上、@keyframesでｱﾆﾒｰｼｮﾝの挙動を定義。
0%はｱﾆﾒｰｼｮﾝ時間の0%のﾀｲﾐﾝｸﾞ、つまりこのソースでは下記に定義された｢1秒｣中の進捗率0%、即ち0秒時(開始時)を指す。
本来のｱﾆﾒｰｼｮﾝの様に動作を付けたい場合は
@keyframes [任意のｱﾆﾒｰｼｮﾝ名] {
0% {background: [任意のスタイル(1)];}
50% {background: [任意のスタイル(2)];}
}
の様に複数記述すれば良い。
[任意のスタイル]にはbackgroundに指定出来る、画像「url([背景にしたい画像のURL])」や色等を入れる。
下記では目的となるautofillでのアニメーションの呼び出しを指す。
このソースによりinput要素での-webkit-autofill(ｵｰﾄｺﾝﾌﾟﾘｰﾄ作動中)時及びtextarea要素での-webkit-autofill時の挙動を指定する。
具体的には、上記ｱﾆﾒｰｼｮﾝを1秒間且つ繰り返しで動作する事を指す。 */
input:-webkit-autofill, textarea:-webkit-autofill {
animation: [任意のｱﾆﾒｰｼｮﾝ名]onamae 1s step-end infinite;
}
/* 以下も冒頭冒頭と同様で重複して設置する必要性は無い。 */
-->
</style>
<!--
ここより上は重複して設置する必要性は無い
(例
<style type="text/css">
p{color: red;}
</style>
<style type="text/css">
a{color: red;}
</style>
p{color: red;}
</style>
<style type="text/css">
a{color: red;}
</style>
◎
<style type="text/css">
p{color: red;}
a{color: red;}
</style>
p{color: red;}
a{color: red;}
</style>
)
*/
0% {background: [任意のスタイル]red;}
}
/* ここより上、@keyframesでｱﾆﾒｰｼｮﾝの挙動を定義。
0%はｱﾆﾒｰｼｮﾝ時間の0%のﾀｲﾐﾝｸﾞ、つまりこのソースでは下記に定義された｢1秒｣中の進捗率0%、即ち0秒時(開始時)を指す。
本来のｱﾆﾒｰｼｮﾝの様に動作を付けたい場合は
@keyframes [任意のｱﾆﾒｰｼｮﾝ名] {
0% {background: [任意のスタイル(1)];}
50% {background: [任意のスタイル(2)];}
}
の様に複数記述すれば良い。
[任意のスタイル]にはbackgroundに指定出来る、画像「url([背景にしたい画像のURL])」や色等を入れる。
下記では目的となるautofillでのアニメーションの呼び出しを指す。
このソースによりinput要素での-webkit-autofill(ｵｰﾄｺﾝﾌﾟﾘｰﾄ作動中)時及びtextarea要素での-webkit-autofill時の挙動を指定する。
具体的には、上記ｱﾆﾒｰｼｮﾝを1秒間且つ繰り返しで動作する事を指す。 */
input:-webkit-autofill, textarea:-webkit-autofill {
animation: [任意のｱﾆﾒｰｼｮﾝ名]onamae 1s step-end infinite;
}
/* 以下も冒頭冒頭と同様で重複して設置する必要性は無い。 */
-->
</style>
どうぞコピペしてご活用下さい。
ちなみに.[クラス名]:-webkit-autofillでも動作しました。
お困りのWeb製作者のお役に立てれば…
ちなみに.[クラス名]:-webkit-autofillでも動作しました。
お困りのWeb製作者のお役に立てれば…
私も初心者につき解説中に誤りのある可能性がございますがご了承願います。
監査課 田中
- Posted by 2018年06月11日 (月) |
コメント（3）
コメント（この記事へのコメント
Posted by 初心者マーク | 2018年08月03日 15:40
コメントありがとうございます。
お役に立てました様で光栄に存じ上げます。
今後共どうぞ宜しくお願い致します。
この度は承認並びに返信が遅くなりまして誠に申し訳御座いませんでした。
Posted by 監査課 田中 | 2018年11月01日 13:16
【追記】
Chrome84ではこの方法は適用出来なくなっております。
Posted by 監査課 田中 | 2020年08月04日 10:37
コメント投稿
※コメントは承認制のため、投稿をしてもすぐには反映されない場合があります。ご了承ください。
※スパム対策の為、お名前・コメントは必ず入力して下さい。
※記事が削除された場合は、投稿したコメントも削除されます。ご了承ください。
投稿ありがとうございます。
ばっちり効きました！
助かりました♪