how to add borders for search and location icon when clicked inside search field?

https://codepen.io/avinash-tallapaneni/pen/ExRomwX. i tried using focus within still has no effect

8 Replies

Avinash•17mo ago

i gave

.search-form input[type="text"]:focus + .search-icon button
{
  border: 2px solid var(--btn-bg-secondary);
  border-left: none;
}

.search-form input[type="text"]:focus + .search-icon button
{
  border: 2px solid var(--btn-bg-secondary);
  border-left: none;
}

onlu search icon border is highlighting, when i give the same to location icon is not showing anything

Mannix•17mo ago

you could use :focus-within on the form element

Avinash•17mo ago

i tried this one

.search-form:focus-within .location-btn,
.search-form:focus-within .search-btn {
  border-color: var(--btn-bg-secondary);
}

.search-form:focus-within .location-btn,
.search-form:focus-within .search-btn {
  border-color: var(--btn-bg-secondary);
}

but it has no effect so i used this

.search-form input[type='text']:focus+.location-icon button
{
  border:2px solid var(--btn-bg-secondary);
  border-right:none;
}


.search-form input[type='text']:focus+.search-icon button
{
  border:2px solid var(--btn-bg-secondary);
  border-left:none;
}

.search-form input[type='text']:focus+.location-icon button
{
  border:2px solid var(--btn-bg-secondary);
  border-right:none;
}


.search-form input[type='text']:focus+.search-icon button
{
  border:2px solid var(--btn-bg-secondary);
  border-left:none;
}

this one is working but only for search icon

Mannix•17mo ago

.search-form:focus-within{border: 2px solid var(--btn-bg-secondary);} it will make a border around the all three elements

Avinash•17mo ago

oh yeah i worked Thankyou so much

Avinash•17mo ago

by any chance you know how to fix this?? gave same border radius. but when i highlight it seems the border radius is way too much

Avinash•17mo ago

@mannix_

Mannix•17mo ago

put the radius on the form not the buttons you might also need to add overflow:hidden on it

Gaming

Programming

how to add borders for search and location icon when clicked inside search field?