クローズアイコンを検索バーの内側の右側に移動するにはどうすればよいですか？

Question

私はウィキペディアのビューアを作っています。虫眼鏡をクリックすると、虫めがねが消え、検索バーと終了アイコンが表示されます。

クローズ/クリアアイコンを検索バーの内側の右側に移動するにはどうすればよいですか？

https://codepen.io/jenlky/pen/WZBLEL

$(document).ready(function(){ 
 
    $(".fa-search").click(function(){ 
 
    $(".fa-search, form").toggle(); 
 
    }); 
 
    
 
});

html, body { 
 
    height: 90%; 
 
    background-color: #033350; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    margin-top: 30px; 
 
    color: white; 
 
} 
 

 
.container, .row { 
 
    height: 90%; 
 
} 
 

 
.fa { 
 
    display: inline-block; 
 
    color: orange; 
 
} 
 

 
/* doesn't work for some reason... 
 
a, .fa, a:focus { 
 
    outline: none; 
 
    border: none; 
 
} 
 
*/ 
 

 
a:hover { 
 
    opacity: 0.6; 
 
} 
 

 
form { 
 
    display: none; 
 
} 
 

 
.searchBar { 
 
    border: 4px solid orange; 
 
    border-radius: 20px; 
 
    padding-left: 15px; 
 
    height: 40px; 
 
    background-color: #033350; 
 
    color: white; 
 
} 
 

 
.ion-close-round { 
 
    color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/e879f2bf45.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css"/> 
 
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/> 
 
<h1>Wikipedia Viewer</h1> 
 

 
<div class="container"> 
 
    <div class="row justify-content-center align-items-center"> 
 
    <i class="fa fa-search fa-3x" aria-hidden="true"></i> 
 
     <form> 
 
     <input type="search" class="searchBar" size="20px;" id="search" autocomplete="off" placeholder="Search Wikipedia"> 
 
     <i class="icon ion-close-round"></i> 
 
    </form> 
 
    <a class="btn" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"><i class="fa fa-random fa-3x" title="Random article" aria-hidden="true"></i></a> 
 
    </div> 
 
</div>

Answer 1

あなたのCSSファイルにこれを追加します。閉じるボタンを絶対位置にすることで、要素を検索フィールドの上に浮かべることができ、相対的な位置に配置するようにフォームを設定すると、閉じるボタンの上と下の値が得られます。また、.searchBarにpadding-rightを追加すると、入力したテキストを閉じるアイコンの上にオーバーフローさせることができます。

form { 
    position: relative; 
} 
.ion-close-round { 
    color: orange; 
    position: absolute; 
    right: 15px; 
    top: 7px; 
} 
.searchBar { 
    padding-right: 30px; 
}