入力フォームの枠線について

Topic summary

問題の内容:

ShopifyのDawnテーマを使用している環境で、入力フォームに常に枠線を表示させたい。

対象となるフォーム:

  • 注文文備考欄
  • カート画面
  • ログイン画面(パスワード、メールアドレス入力欄)

提供された解決策:

技術的な説明として、デフォルト設定ではinputタグの疑似要素:afterbox-shadowにより枠線が描画される(記述先はbase.css)。色は--color-foregroundというCSS変数が参照され、これはテキストカラーが適用されている(theme.liquidに記述)。

Chrome開発者ツールで原因を探ることが推奨される。

重要な指摘:

カスタマイズ > テーマ設定 > 入力 > 不透過率の項目が0%になっていると枠線が表示されない可能性がある。この設定項目で透明度を調整できる。

現状:

質問者は回答を確認し、調査を進めている段階。

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.

先日質問させて頂きましたが、解決していないので再度質問させて頂きます。

テーマはDawnを使用しております。

以下の入力フォームに常に枠線を表示させたいです。

①ログイン画面

・メール

・パスワード

②カート画面

・注文備考欄

具体的な方法を教えて頂ける方がいましたらご協力頂けますと幸いです。

よろしくお願いします。

デフォルトの設定のままであれば、入力用inputタグの疑似要素:afterにて、box-shadowで枠線の描画が行われます。

記述先はbase.cssです。

色については、css変数「–color-foreground」が参照されます。

この「–color-foreground」は、テキストカラーが適用されています。(記述場所はtheme.liquid)

また、この枠線に関することとして、透明度の設定項目も存在します。

カスタマイズ > テーマ設定 > 入力 > 不透過率

ここが0%なら線が表示されません。

現在、どういった理由で非表示になっているのか分かりませんが、何かが無効になっていたり、透明になっていたり、あるいはまったく別の記述が上書きしている可能性があります。

chromeの開発者ツールを用いて原因を探るのが確実です。

お忙しい中ご返信ありがとうございます。

そうなんですね、承知しました。

少し調べてみます!