a-blog cms Chromeのセレクトボックスが崩れる場合の対応

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。ましじめの田村です。

a-blog cms Ver.2.0以上のChromeでセレクトボックスの表示がずれる場合があるようです。
次期バージョンで修正予定とのことですが現状解決したい場合は次の対応をとると良さそうです。
Google Chrome(バージョン: 79.0.3945.79) でセレクトメニューのスタイルが崩れる不具合について

themes/system/include/head/admin-css.htmlに次を追加

<style>
.acms-admin-form select,
.acms-admin-form select:hover,
.acms-admin-form .acms-form-select
.acms-admin-form .acms-form-select:hover {
  -webkit-appearance: none;
}
</style>

全体で読み込むCSSに次を追加


/* acms.css に対応した記述 */
.acms-form select,
.acms-form select:hover,
.acms-form .acms-form-select
.acms-form .acms-form-select:hover  {
  -webkit-appearance: none;
}

/* 管理画面・閲覧側の編集画面のUI に対応した記述 */
.acms-admin-form select,
.acms-admin-form select:hover,
.acms-admin-form .acms-form-select
.acms-admin-form .acms-form-select:hover {
  -webkit-appearance: none;
}

全体のCSSには合わせてこちらも入れておくとよいかもしれません。
a-blog cms テキストユニットのリンクをすると他のユニットの入力欄に重なってしまう

/* テキストユニットのリンクをすると他のユニットの入力欄に重なってしまうに対応した記述 */
.lite-editor-tooltip-wrap {
z-index: 100100!important;
}

以上、a-blog cms Chromeのセレクトボックスが崩れる場合の対応でした。


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから