【CSS】 autofill に 於ける user agent stylesheet に 基づく スタイル設定 | STAFF BLOG | 【 田中会計グループ 】 浜松市の公認会計士・税理士| 田中会計グループが相続税・確定申告・事業承継をサポート! 【 田中範雄公認会計士事務所 / 税理士法人TMS浜松 】

【CSS】 autofill於けるuser agent stylesheet基づくスタイル設定 

サイト内検索ウェブサポ サポートページサイト管理画面

TOP > STAFF BLOG > コーヒーブレイク > 【CSS】 autofillに於けるuser agent styleshe...

ブログ内全文検索→

コーヒーブレイク

【CSS】 autofill於けるuser agent stylesheet基づくスタイル設定
[!]本題迄飛ばしたい方はこちらから

当事務所サイトの編集を担当している監査課の田中でございます。
私がWeb担当をする様になって約1年。Webに関しては元々素人()であり、現在も会計事務所業務の副業としてWebを編集しているのみでありWeb専門ではございません。
htmlでいえばa要素やbrタグ等を知っている程度、CSSに関しては殆ど無知、JSに関してはJavaとは(名前が似ているだけで)異なる事を知っている程度でした。

しかしそんな私でも(言語の勉強という形では一切しておりませんが)既存のソースに手を加える形で覚えて来た事により多少は知識が付いてきました。
とはいえど対処療法的な編集をしている事、廃止された要素でも現在表示されていればあまり気にせず使っている
(というかソースに不整合があってもちゃんと表示されればあまり気にしておりません←)
事、コンテンツ管理システム(C M S)特有の制約がある事(*)、そして私自身の持ち合せているセンス等から決して綺麗なソースではございませんが…
*
逆に、(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)
<!--
<!>こちらをそのままコピペしても作動しません。そのまま使える実際のソース例をコピーしたい場合はこちらから。青枠内(灰地部)をそのままコピー&ペーストしてお使い下さい。元に戻す
-->
 
<style type="text/css">
<!--
/*
ここより上は重複して設置する必要性は無い

(例

<style type="text/css">
p{color: red;}
</style>
<style type="text/css">
a{color: red;}
</style>



<style type="text/css">
p{color: red;}
a{color: red;}
</style>
)

*/
@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>




 
どうぞコピペしてご活用下さい。
ちなみに.[クラス名]:-webkit-autofillでも動作しました。
お困りのWeb製作者のお役に立てれば…


私も初心者につき解説中に誤りのある可能性がございますがご了承願います。

監査課 田中



  • Posted by 2018年06月11日 (月) | コメントコメント(2

この記事へのコメント

投稿ありがとうございます。
ばっちり効きました!
助かりました♪

Posted by 初心者マーク | 2018年08月03日 15:40

コメントありがとうございます。

お役に立てました様で光栄に存じ上げます。
今後共どうぞ宜しくお願い致します。

この度は承認並びに返信が遅くなりまして誠に申し訳御座いませんでした。

Posted by 監査課 田中 | 2018年11月01日 13:16

コメントコメント投稿

お名前:
メール:
コメント:
CAPTCHA:

スパム防止のため、以下に表示されている文字列を入力してください


※コメントは承認制のため、投稿をしてもすぐには反映されない場合があります。ご了承ください。

※スパム対策の為、お名前・コメントは必ず入力して下さい。

※記事が削除された場合は、投稿したコメントも削除されます。ご了承ください。


メール欄にご入力されますと、入力されたメールアドレスが公開されてしまいますのでくれぐれもご注意下さいませ。なお、メールアドレスをご入力頂きましても原則として当事務所からのe-mail返信は致しませんのでご了承下さい。
※コメントはspam対策の為承認制としております。コメントの反映には長いお時間を頂戴する場合がございますので、関与先の皆様でご不明点等がございましたら監査担当者迄お問い合わせ下さいませ。一般のお客様は当事務所連絡先をご確認の上お問い合わせ下さいませ。
ブログランキング・にほんブログ村へ


お気軽にご相談ください。無料相談・メール相談受付中
お電話・FAXでのお問い合わせ
TEL:053-475-2511

FAX:053-475-2512

受付時間:9:00〜17:30 定休日:土・日・祝日

メールフォームでのお問い合わせ
メールフォームはこちら

24時間受付中


TMS 田中会計事務所

田中範雄公認会計士・税理士事務所

【業務内容】
会計事務所 <公認会計士・税理士業務>
「併設機関」・株式会社TMS・平田晴久社会保険労務士事務所
【所在地】
静岡県浜松市中区高林3-12-13


お気軽にご相談ください。TEL:053-475-2511

浜松市中区高林3-12-13
公認会計士・税理士
受付時間:9:00〜17:30
定休日:土・日・祝日

お問い合わせTMS 田中会計事務所

田中範雄公認会計士・税理士事務所はTKC全国会会員です

TKC全国会

TKC全国会は、租税正義の実現をめざし関与先企業の永続的繁栄に奉仕するわが国最大級の職業会計人集団です。

スタッフのブログTax House確定申告