このタグを入力内で​​クリック可能にするにはどうすればよいですか？

Question

私はプロジェクトに素敵な入力をロードしました。私の目標はこの入力の中にクリック可能なボタン/ float：rightのタグを入れることです。私のローカルバージョンの中では、ボタン/タグ（疑問符）アニメーションの開始がクリックされた後、jsfiddleの例では反応しません。私はこの問題を解決する方法を知りません。入力ソースを変更しないでください（設計はクールです）。

https://jsfiddle.net/yoofu5me/5/

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <span class="input input--haruki text-center" style="margin-top: 10px;"> 
      <input class="input__field input__field--haruki" type="text" id="input-1" /> 
      <label class="input__label input__label--haruki" for="input-1"> 
       <span style="font-size:14px;" class="input__label-content input__label-content--haruki">Give me the word <a href="https://www.freshdesignweb.com/css-login-form-templates/" target="_blank" style="float:right" href="#" ><i class="fa fa-question"></i></a></span> 
      </label> 

     </span> 

    </div> 

</div> 

Answer 1

pointer-event: none; CSSルールは、リンク（疑問符）の親要素に設定されています。

このルールを削除すると、問題は解決します。

Answer 2

問題は、あなたのHTMLファイルにCSSをリンクしていないことです。

あなたが提供したリンクにもCSSがあります。これをstyles.cssに保存します。次に、HTMLファイルに移動します。これをタグに追加します。

<link rel="stylesheet" href="styles.css">