Search box problem

HTML-CSS
1

Does anyone know where the bug is in this code?
There’s no way I can make the letters out of sight.
thanks
Link

2

Hello @tihanaputinja !
Try to change

.search-bar { 
width: 8px;
}

to

.search-bar {
width: 12px;
}

Hope that helps !

3

Yep… as already said by stefan. Just increase the width of your .search-bar selector. :+1:

4

But I would like it to remain a small circle, so when you click on it, it increases. i tried to put the color as a background of the magnifier as well, but the letters are still visible.

5

so you want the letter to be visible only when you click on the search bar right ?

6

Yes, only when you click on the search bar, and when it opens you can see that it writes search.

7

sorry i couldnt fix your code but i created one for you using absolute positioning

<!-- HTML -->
	<div class="search">
	<input type="text" placeholder="search..">
<button class="submit">
	<i class="fas fa-search"></i>
		</button>
	</div>


/* CSS */

.search{
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	height: 100px;
}

.submit{
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 80px;
	background: #46ce72;
	border-radius: 50%;
	z-index: 1;
	transition: all 1s;
	border: none;
}

.search input{
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 68px;
	height: 68px;
	background: crimson;
	color: white;
	border-radius: 50px;
	transition: all 1s;
	z-index: 2;
	outline:none;
	border:none;
	opacity: 0;
	padding: 0 20px 0 90px;
}

.search input:focus{
	width: 200px;
	opacity: 1;	
	cursor: text;
	font-weight: bold;
}

input:focus ~ .submit{
	right: 250px;
	background: #999;
	z-index: 3;
}
8

No problem, thanks for trying and thanks for the search box, in the end I still have the search box I wanted. :raised_hands: :star_struck: :partying_face:

9

You are most welcome. :+1:

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.