クリック可能なフォント驚くばかりのアイコンの中の入力

Question

私は現在、入力フィールドの上に置かれたフォントのすばらしいアイコンを持っています。アイコンをクリック可能にしたいのですが、動作させることができません。私はスパンでそれを包み込み、スパンカーソルを変更しましたが、効果がないようです。

ここでは、コードです：

.inner-addon { 
 
    position: relative; 
 
} 
 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 
.left-addon .fa { 
 
    left: 0px; 
 
} 
 
.right-addon .fa { 
 
    right: 0px; 
 
} 
 
.left-addon input { 
 
    padding-left: 30px; 
 
} 
 
.right-addon input { 
 
    padding-right: 30px; 
 
} 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />

Answer 1

は、あなたがクリックする上で何かをすることを求めていないので、それは何の効果もありません。それはあなたが望むものとして機能します。リンクのように動作させたい場合は、<span>を<a>に変更し、クリックハンドラを与えます。

クリックハンドラ

$(function() { 
 
    $("#locationClickableIcon").click(function() { 
 
    alert("You clicked me!"); 
 
    }); 
 
});

.inner-addon { 
 
    position: relative; 
 
} 
 

 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 

 
.left-addon .fa { left: 0px;} 
 
.right-addon .fa { right: 0px;} 
 

 
.left-addon input { padding-left: 30px; } 
 
.right-addon input { padding-right: 30px; } 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span id="locationClickableIcon"><i class="fa fa-crosshairs" id='autolocate'></i></span> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />

リンク

.inner-addon { 
 
    position: relative; 
 
} 
 

 
.inner-addon .fa { 
 
    position: absolute; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 

 
.left-addon .fa { left: 0px;} 
 
.right-addon .fa { right: 0px;} 
 

 
.left-addon input { padding-left: 30px; } 
 
.right-addon input { padding-right: 30px; } 
 
#locationClickableIcon { 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a id="locationClickableIcon" href="http://example.com/"><i class="fa fa-crosshairs" id='autolocate'></i></a> 
 
<input type="text" id="address" placeholder="Zipcode" value="" />