As part of my coding practice, I am working on creating a website similar to the one shown. I have encountered an issue with adding a search word alongside a search icon like in the image.
I have successfully added the code for the word "Sök," which means "Search" in Swedish. However, I am unsure how to incorporate the icon to make it look identical to the example.
const icon = document.querySelector('.icon');
const search = document.querySelector('.search').value;
function searchbar() {
icon.style.display = "block";
return
}*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
display: grid;
place-items: center;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(9, 5, 31);
}
.container {
position: relative;
}
.container .icon {
display: none;
position: absolute;
top: 50%;
right: 10px;
height: 20px;
transform: translateY(-50%);
}
.container .search {
width: 300px;
height: 40px;
border-radius: 9999px;
padding-left: 20px;
} <div class="container">
<img class="icon" src="https://img.icons8.com/ios-filled/50/000000/search--v1.png" />
<input class="search" oninput="searchbar()" on type="text" placeholder="search">
</div>To display the search icon next to the searched word, simply place both the icon and the search bar within the same parent element. Set the icon's position to 'absolute' and the parent's position to 'relative'.
To make the search icon appear while typing, initially set its display to 'none' and use JavaScript to show it when input length is greater than 1 through setting display to 'block'.
There are multiple ways to achieve this functionality.
For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...
I have encountered a bug on my one-page Bootstrap template website. One of the sections is causing issues after multiple page refreshes. Despite checking the console for errors, I am unable to identify the source of the problem. Here is the HTML code for ...
I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...
Hi everyone, I'm currently working on a Covid-19 tracker website and facing an issue that says: 'SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data' ; Being new to web development, I am unsure about what&apo ...
I am encountering difficulties with clicking on a link within a webpage using the Selenium webdriver on Firefox. Below is a snippet of the code related to the issue: WebElement option = driver.findElement(By.id("AccNumSpan" + i)); if(opt ...
Did you know that you can change the browser's default text highlight (selection) background color using CSS? For example: ::selection { background: #ffb7b7; } Find out more about the browser/OS specific default background color when selecting tex ...
I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...
Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...
Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...
Encountered a strange bug recently. Whenever the page height exceeds the viewport due to mat-form-fields, I'm facing an issue where some elements, particularly those from Angular Material, fail to load. Here's a GIF demonstrating the problem: GI ...
I want to demonstrate the ability to send a message without hardcoding all messages in my frontend. I utilized existing code from this link shared by another developer. I have included the id="msg" in the input field and id="chatpanel" with class chat-pan ...
Is there a way to make the line visible when hovering over my circular div? #line { display: none } <div id='circle'> <div id= 'line'> ...
I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...
Hi there! I am currently learning HTML, CSS, and JS. I'm working on a homepage project using Bootstrap-5 and have successfully integrated a navbar. However, I've noticed that the navbar disappears too quickly when I scroll down. Is there a way to ...
I have been experimenting with converting JSON data to HTML using json2html. The JSON data structure I am working with is as follows: json_obj = [{"Agent Status": "status1", "Last backup": "", "hostId": 1234567, "hostfqdn": "test1.example.com", "username" ...
I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...
I've been working on a form using HTML, CSS, and JavaScript where I implemented an "Add" button to duplicate the form. The issue arises with the ion-select element within the duplicated form. While the original form displays all predefined options upo ...
I'm working on creating a personalized homepage for my browser and I want to display 3 images with captions evenly spaced within a divider. Although everything seems to be in place, the border of the outermost divider is not covering the images. How c ...
Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...
After reading through numerous posts related to my query, I have yet to find a solution to my problem. Utilizing PHP and MySQLi, I am attempting to extract data from my server. Within my database, I have a single-column table and my aim is to store this ...