CSS способ достижения solid сплошных граней между предложениями автозаполнения выпадающего списка и полем ввода ввода, когда окно поиска имеет закругленные углы?

Question

Название, тело и изображения теперь должны быть лучше объяснительными.

У меня есть следующее поле поиска, которое я хотел бы сохранить, закругленные углы:

Теперь, когда пользователь использует окно поиска один раз, автозаполнение предлагает текст, подобный следующему: pi c:

То, что у меня сейчас есть в CSS, это

input {
  width: 100%;
  height: 38px;
  border-radius: 19px;
  padding: 0px 20px;
  font-size: 13px;
  color: #000;
  outline: none;
}

А html довольно просто примерно так:

<div class="wrapper">
 <fieldset>
  <input name="text" type="text" id="text" placeholder="Enter text..." required="">
 </fieldset>
</div>

Из предложений пользователей в комментариях хорошим подходом было бы установить для border-radius значение 0 в нижних 2 углах, однако я не знаю, как этого добиться, только когда появляется автозаполнение, поэтому не первый раз пользователь использует поле ввода ввода.

Можно ли это сделать в CSS или нужно будет Javascript?

Спасибо большое

Answer 1

Вы можете использовать одно и то же свойство border-radius с несколькими параметрами, работающими по-разному как

input {
  width: 100%;
  height: 38px;
  border-radius: 19px 19px 0px 0px;
  padding: 0px 20px;
  font-size: 13px;
  color: #000;
  outline: none;
}

Для более подробной информации: https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 2

Вы можете использовать сокращение для border-radius, чтобы независимо стилизовать различные углы: border-radius: 19px 19px 0 0;

Эта строка переводит в:

• border-top-left-radius: 19px;
• border-top-right-radius: 19px;
• border-bottom-right-radius: 0px;
• border-bottom-left-radius: 0px;

.dropdown input {
  width: 100%;
  height: 38px;
  border-radius: 19px 19px 0 0;
  padding: 0px 20px;
  font-size: 13px;
  color: #000;
  outline: none;
  border: 1px solid;
  box-sizing: border-box;
}

.dropdown .input-dd {
  width: 100%;
  border: 1px solid;
  border-top: 0;
  box-sizing: border-box;
  height: 100px;
  background: #ddd;
}

<div class="dropdown">
  <input>
  <div class="input-dd">
  asd
  </div>
</div>