解決しようCODE:HTML形式で送信ボタンを通りFontAwesomeアイコンを使用する方法
元の質問への<div id="header-search-desktop-div">
<form id="header-search-form" role="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." />
<input id="header-search-submit" type="submit" value="" name="post_type" />
</span>
</fieldset>
</form>
</div>
#header-search-submit {
position: absolute;
z-index: 1;
padding: 0;
right: 15px;
top: 6px;
font-size: 24px;
font-family: FontAwesome;
color: #7B7B7B;
cursor: pointer;
background: 0;
border: 0;
}
:私はとして機能するように、このFontAwesomeの検索アイコンを取得しようとしている
送信ボタン:
:リンクは、フォーム(ない常緑樹)を検索します
JSの使用やボタンタグの使用など、さまざまな質問を見てきましたが、これを動作させることができませんでした。ここで
私のコードです:
CSS:
#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}
/* header search desktop */
@media screen and (min-width: 800px) {
#header-search-desktop-div {
position: absolute;
left: 150px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
}
}
HTML:
<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
</span>
</fieldset>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
'/頭の前にスペース' に提出する関数を作成するJSを使用してのアイデア? :私は明らかに非常に間違って何かをやっている
<script>$('#header-search-desktop-span').click(function() {
alert('Searching for '+$('#header-search-submit').val());
});
</script>
、あなたが送信ボタンを作成する必要があります= D
ありがとう
button
タグの中にそれを入れて作ります!ボタンが正しく機能するようになりました。しかし、別のボタン要素が表示されるようになりました。どのように追加ボタンを削除/非表示にするのですか?ここに示した 問題: https://themirrorman.co HTMLコードをここ: https://jsfiddle.net/zayter/gt3asodb/ – VisualWizardry@VisualWizardryそのことについて申し訳ありませんが、動作するはずの新しいコードに答えを変更。 – skiilaa
あなたは絶対的な美しさをあなたの助けを借りてありがとう! – VisualWizardry