Write - 書くためのテーマ

前提

『Write-書くためのテーマ』の検索バーを作っていまして、検索バーの画像を表示をしたいのですがURLでやっているはずなのですが全く表示をされないので何が原因なのかよく分からないので教えてもらえないでしょうかよろしくお願いします。

ソフトウェア・アプリケーション

MacOS , Atom, (Visual Studio Code) , Google Chome

発生している問題

検索バーの検索アイコンマークが表示されない。

[ HTML・CSS ]ソースコード

html
1            <form action=""><!--[ formタグを追加 ]-->
2              <input class="search" name="q" type="text" placeholder="検索…" /><!--[ input テキストボックスを作成 ]-->
3            </form><!--[ formタグを終了 ]-->
4

css
1.search {
2    background: url(/検索アイコン.png);
3}

最後

・色々質問のところでうまく伝わってなかったら誠に申し訳ありません。
・もしご回答をしてくれた方はお忙しい中、ご回答をして頂きありがとうございます。

m.ts10806

2021/01/04 10:50

本件に直接関係ないのでこちらに書きますが、全角ファイル名はやめたほうがいいです。あと、タイトルが要件を示してません。 https://teratail.com/help/question-tips#questionTips3-1 タイトルで意味が伝わらなければそれだけアドバイスを得る機会を失してしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

結論

質問の意味があまりよくわからないので、見当違いのことを書いているかもしれませんが、
とりあえず、以下の記述で私の環境では、テキストボックスの背景が「検索アイコン.png」の画像の内容になりました。

HTML
1<html>
2<head>
3<style type="text/css">
4.search {
5    background: url("検索アイコン.png");
6}
7</style>
8</head>
9<body>
10
11            <form action=""><!--[ formタグを追加 ]-->
12              <input class="search" name="q" type="text" placeholder="検索…" /><!--[ input テキストボックスを作成 ]-->
13            </form><!--[ formタグを終了 ]-->
14</body>
15</html>

修正点は、

CSS
1    background: url(/検索アイコン.png);

を

CSS
1    background: url("検索アイコン.png");

に変えた点のみです。

投稿2021/01/04 09:26

kozuchi

総合スコア1193

Rwight

2021/01/04 09:41

[ kozuchi ]さんお忙しい中ご回答をして頂きありがとうございました。修正をしてみたら検索バーに虫眼鏡マーク[ ???? ]を表示させることが出来ましたありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！