Q&A
本件に直接関係ないのでこちらに書きますが、全角ファイル名はやめたほうがいいです。
あと、タイトルが要件を示してません。
https://teratail.com/help/question-tips#questionTips3-1
タイトルで意味が伝わらなければそれだけアドバイスを得る機会を失してしまいます。
前提
『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}
最後
・色々質問のところでうまく伝わってなかったら誠に申し訳ありません。
・もしご回答をしてくれた方は お忙しい中、ご回答をして頂きありがとうございます。
回答1件
0
ベストアンサー
結論
質問の意味があまりよくわからないので、見当違いのことを書いているかもしれませんが、
とりあえず、以下の記述で私の環境では、テキストボックスの背景が「検索アイコン.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
総合スコア1193
[ kozuchi ]さんお忙しい中ご回答をして頂きありがとうございました。
修正をしてみたら検索バーに虫眼鏡マーク[ ???? ]を表示させることが出来ましたありがとうございました。
あなたの回答
tips
プレビュー
