検索窓の検索マーク(虫眼鏡アイコン)の表示について。スマホ実機でのみinput要素のアイコンがずれて表示される

Question

html・css初心者です。

やりたいこと

検索窓の検索マーク(虫眼鏡アイコン)を検索窓の右横に配置する。

困っていること

スマホ実機のみ、検索窓の検索マーク(虫眼鏡アイコン)が検索窓の外に表示されてしまう。

cssも正しく当たっているはずが、アイコンがずれて表示されてしまい困っています。
また、「スマホ実機のみ崩れる」ということが初めての体験で、どのように調査して良いかがわからない状態です…。

試したこと・調べたこと

・PC表示・モバイルシミュレーターでは正しく表示されていることを確認
・キャッシュクリア
・該当CSS記述が「@media print, screen and (min-width: 960px)」の範囲内に入っていないかの確認

【確認環境】
PC：windows10 GoogleChrome 83.0.4103.61
スマホ：iPhone7 safari/604.1

<div id="search" class="search-custom-d">
	<form method="get" id="searchform" action="★">
		<label class="hidden" for="s">
					</label>
		<input type="text" placeholder="検索キーワードを入力" value="" name="s" id="s">
		<input type="submit" value="&#xf002;" class="fa" id="searchsubmit">
	</form>
</div>

.post #search input {
    border: none;
}

input#searchsubmit {
    padding-right: calc( 50px + 25px);
    padding-left: 25px;
    padding-top: calc( 50px + 10px);
    padding-bottom: calc( 50px + 10px);
    font-size: 14px;
}

input#searchsubmit {
    margin: -50px -50px -50px 0;
    background: #fff;
    color: #424242;
    cursor: pointer;
    padding: 60px 65px 60px 15px;
    border: none;
}

input.cs-text-input, #searchform input {
    -webkit-appearance: none;
}

▼PC表示

▼スマホ表示

【追記】
transform: translate(50px, -50px);
outline-color: transparent;
▼上記記述追加後のスマホ表示

Answer 1

marginではなくtransform: translate();で位置を移動してみてはいかがでしょう。

【translate() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate

黒い線は outline かも。

【outline - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/outline

Comments

[pon_nyamo]

こんばんは！回答いただきありがとうございます！！
上記のアドバイスとても参考になりました。

まず「marginではなくtransform: translate();で位置移動」とのことで、こちらスマホ実機で正しい位置に配置されるようになりました！
ただ全体のCSSに記述してしまうと、次はPCの方が崩れてしまうので、以下の通り959px以下で適用されるように指定しています。

次に黒い線ですが特にoutlineを指定しているCSSが見当たらず、透明になるように「outline-color: transparent;」で記述してみました。
しかし黒い線に関しては解消されませんでした。。。

私があまりCSSの知識がなく、、、記述誤りがあればご指摘いただけると幸いです。
どうぞよろしくお願いいたします。

▼追加したもの
```css
@media only screen and (max-width: 959px) {

input#searchsubmit {
transform: translate(50px, -50px);
outline-color: transparent;
}
```

[pon_nyamo]

記述追加後のスマホ表示のキャプチャを貼り付けました。

[kei344]

outline: 0 none !important;
↑これでも消えませんか？

あとは周りに影響がある全般を試してみるか。
outline: 0 none !important;
border: 0 none !important;
box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
text-shadow: 0 0 0 rgba(0,0,0,0) !important;

[pon_nyamo]

outline: 0 none !important;　では消えなかったので
border: 0 none !important;　を試したところ黒線が消えました！！！

本当にありがとうございます。とても勉強になりました。