Wie kann man das Symbol "Schließen" an die Innenseite der rechten Seite der Suchleiste verschieben?

Question

Ich mache einen Wikipedia-Viewer. Wenn Sie auf die Lupe klicken, wird sie ausgeblendet und eine Suchleiste und ein Schließen-Symbol werden angezeigt.

Wie verschiebe ich das Schließen/Löschen-Symbol auf die Innenseite der rechten Seite der Suchleiste?

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

Fügen Sie diese Datei auf Ihrem CSS. Wenn Sie die Schaltfläche "Schließen" als absolute Position festlegen, kann das Element über dem Suchfeld schweben und das Formular so festgelegt werden, dass die relativen und relativen Einschränkungen der oberen und rechten Werte der Schaltfläche "Schließen" festgelegt werden. Durch das Hinzufügen eines Auffüllrechts zur .searchBar kann der eingegebene Text nicht über das Schließen-Symbol überlaufen.

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