CODEWITHSUNDEEP
htmlcss
Nikey63
Nikey63

Reputation: 39

Search Input and List Items with rounded corners HTML/CSS

Initial situation: I'm currently working on a "search bar". For that, I have an Input and some List items as search results. This works with the help of javascript which searches through the list items. The list items show up directly under the input.

My problem: My question is now regarding CSS. I want rounded corners for the search input which I can do with border-radius. But I also want the search results that show up when something is typed in the input to have rounded corners. If I give them a border-radius they all appear with rounded corners separately which I do not want. As this is really hard to explain for me please look at my screenshots.

This is exactly how I want it, the input has 4 rounded corners: enter image description here

This is how it should look like when something is typed in the input, the search results show and have rounded corners at the bottom and the input has them at the top:

enter image description here

My Question: How is it possible to have 4 rounded corners for the input and when something is typed in, the rounded corners should disappear at the bottom from the input and be at the last search result at the bottom?

My Code HTML:

<div class="wrapper"> 
<input type="text" id="myInput" onkeyup="search()" placeholder="Search for Topic ..." title="Type in a theme">

<ul id="myUL">
  <li><a href="#">School</a></li>
  <li><a href="#">Sports</a></li>
  <li><a href="christmas.html">Christmas</a></li>
  <li><a href="#">Office</a></li>
  <li><a href="#">Funny</a></li>
  <li><a href="#">Money</a></li>
  <li><a href="#">Food</a></li>
  <li><a href="#">Animals</a></li>
</ul>
</div>

My Code CSS:

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: none; /* Add a border to all links */
  margin-top: -14px;
  background-color: #fff; /* Grey background color */
  padding: 12px; /* Add some padding */
  font-family: sans-serif;
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  width: 255px;
  margin-left: auto; /* Center the list elements */
  margin-right: 15px;
}

  #myInput {
    background-image: url('searchicon.png'); /* Add a search icon to input */
    background-position: 10px 7px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 150px; /* 20%-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 5px 40px; /* Add some padding */
    border: none; /* Add a grey border */
    border-radius: 20px;
  }

Upvotes: 0

Views: 1858

Answers (1)

dfvc
dfvc

Reputation: 414

You can control separately each corner radius with:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

For controlling the input status (based on its content) you have to use some javascript. The following example uses an open class which is added/removed to the input according to the content. When applied, this class sets to 0 the radius of the bottom corners.

const searchInput = document.querySelector('.search-input');

searchInput.addEventListener('input', () => {
  if (searchInput.value.trim() === '') {
    searchInput.classList.remove('open');
    
    return;
  }
  
  searchInput.classList.add('open');
});
.search-input {
  padding: 10px;
  border-radius: 20px;
}

.search-input.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
<input type="text" name="search" class="search-input" />

Upvotes: 1

Related Questions