デザインレシピの検索窓の色を変えたい

Question

いつもお世話になっています。
デザインレシピ記載の検索窓の色を変えたいんですが、うまくいきません。
色2箇所と虫眼鏡マークを変更すればと思い、下記ソースに変更したのですが、
虫眼鏡マークが隠れているようです。
どうすればいいでしょうか？ご教授よろしくお願いします。


.shopSearchForm{width:100%;max-width:620px;margin:0 auto;}.shopSearchForm > *{vertical-align:bottom;box-sizing:border-box;height:38px;}.shopSearchInput{width:calc(100% - 45px);border:2px solid #808080;border-radius:3px;text-indent:8px;font-size:12px;font-family:"Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;line-height:32px;}.shopSearchButton{border:none;border-radius:3px;width:48px;margin:0 0 0 -3px;cursor:pointer;background:#808080 url(https://www.rakuten.ne.jp/gold/shimamura-miso/searchicon.png) no-repeat 1px -239px;}

Accepted Answer

ECマスターズの伊藤です。

> 色2箇所と虫眼鏡マークを変更すればと思い、下記ソースに変更したのですが、
> 虫眼鏡マークが隠れているようです。
> どうすればいいでしょうか？ご教授よろしくお願いします。

デザインレシピにて、表示させている画像が
https://www.rakuten.co.jp/com/img/home/itempage/haeder_sprite.png
のように、複数のアイコンが表示さてているものを、

デザインレシピ ソース
url(https://www.rakuten.ne.jp/gold/shimamura-miso/searchicon.png) no-repeat 1px -239px;

の

1px -239px;

で、右に1px、下に239px移動させて、
画像の位置をずらすことで、虫眼鏡の部分を
表示させるようになっています。

そのため、用意いただいた画像が移動してしまい、
表示されない状態となっていますので、

1px -239px;

の数値を修正していただき、
ご希望の位置に表示して頂ますよう、
お願いいたします。

Answer

伊藤様

お世話になっています。

ありがとうございます。
表示されたのですが、画像が大きいのか枠いっぱいになってしまい見づらいです。
適度な大きさに変更したいのですが、どう弄ればよいでしょうか。
また、今は上辺と左辺にくっついた状態になっているので、そこも適度な間隔を開けたいです。
こちらも教えてください。

よろしくお願いします。


.shopSearchForm{width:100%;max-width:620px;margin:0 auto;}.shopSearchForm > *{vertical-align:bottom;box-sizing:border-box;height:38px;}.shopSearchInput{width:calc(100% - 45px);border:2px solid #808080;border-radius:3px;text-indent:8px;font-size:12px;font-family:"Meiryo", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;line-height:32px;}.shopSearchButton{border:none;border-radius:3px;width:48px;margin:0 0 0 -3px;cursor:pointer;background:#808080 url(https://www.rakuten.ne.jp/gold/shimamura-miso/searchicon.png) no-repeat;}

Answer

ECマスターズの伊藤です。

> 表示されたのですが、画像が大きいのか枠いっぱいになってしまい見づらいです。
> 適度な大きさに変更したいのですが、どう弄ればよいでしょうか。
> また、今は上辺と左辺にくっついた状態になっているので、そこも適度な間隔を開けたいです。

ボタンのサイズが、
横48px 縦38px
となっておりますので、
こちらのサイズで、画像の修正をお願いいたします。

Answer

伊藤様

お世話になっています。
画像のサイズを指定のもので作り直したらうまくいきました。
ありがとうございました。