Ввод с префиксом / суффиксом, НЕ с предыдущим родственным селектором

Question

Я пытаюсь сделать ввод с элементами префикса и суффикса:

• В одиночку, вход округлен
• С префиксом (соответственно суффикс), слева (соответственно... правая) сторона закруглена, но не правая (соответственно левая) сторона
• С префиксом и суффиксом, вход не округляется вообще (кнопки округлены)

Мне удалось обработать префиксный элемент, но я не могу найти селектор CSS, который бы сказал «Округлить правую сторону ввода, если элемент следует за вводом», пусть он будет на входе или в своем контейнере,

Я хотел бы сделать это только в HTML / CSS (без JS).Есть идеи ?

PS: Я не прошу предыдущий селектор брата .Я спрашиваю, есть ли способ выбрать вход, за которым следует суффикс.Это включает в себя:

• предыдущий селектор братьев и сестер (который не существует)
• элемент, за которым следует другой (который противоположен, так что, вероятно, тоже не существует)
• родительский контейнер, имеющий вход в качестве последнего дочернего элемента и ничего больше
• родительский элемент, имеющий N дочерних элементов (что позволяет мне знать, что если есть 3 дочерних элемента, то входные данные должны быть округлены)

:root {
  --radius: 5px;
}

div {
  height: 36px;
  margin: 12px;
}

* {
  box-sizing: border-box;
}

input {
  height: 100%;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid #ccc;
  padding: 0 6px;
}

button {
  height: 100%;
  background: teal;
  border: 0;
  color: white;
}

button[prefix] {
  border-radius: var(--radius) 0 0 var(--radius);
}

button[suffix] {
  border-radius: 0 var(--radius) var(--radius) 0;
}


div > button[prefix] + input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

div > button[suffix] ~ input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

<div>
  <input type="text" placeholder="Type here">
</div>

<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>

<div>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>


<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
</div>

Answer 1

Если речь идет только о визуальном эффекте, вы можете рассмотреть псевдоэлемент, чтобы скрыть закругленные углы:

:root {
  --radius: 5px;
}

div {
  height: 36px;
  margin: 12px;
}

* {
  box-sizing: border-box;
}

input {
  height: 100%;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid #ccc;
  padding: 0 6px;
}

button {
  height: 100%;
  background: teal;
  border: 0;
  color: white;
}

button[prefix] {
  border-radius: var(--radius) 0 0 var(--radius);
}

button[suffix] {
  border-radius: 0 var(--radius) var(--radius) 0;
  position:relative;
}


div > button[prefix] + input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

div > button[suffix]:before {
  content:"";
  position:absolute;
  right:calc(100% + 4px);
  top:0;
  bottom:0;
  width:calc(var(--radius) + 2px);
  background:#fff;
  border: 1px solid #ccc;
  border-left:0;
}

<div>
  <input type="text" placeholder="Type here">
</div>

<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>

<div>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>


<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
</div>

Другая идея состоит в том, чтобы всегда иметь элемент префикса / суффикса в начале и использовать порядок для визуального изменения их места:

:root {
  --radius: 5px;
}

div {
  height: 36px;
  margin: 12px;
  display:flex;
}

* {
  box-sizing: border-box;
}

input {
  height: 100%;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid #ccc;
  padding: 0 6px;
  margin:0 5px;
}

button {
  height: 100%;
  background: teal;
  border: 0;
  color: white;
}

button[prefix] {
  border-radius: var(--radius) 0 0 var(--radius);
  order:-1;
}

button[suffix] {
  border-radius: 0 var(--radius) var(--radius) 0;
  order:1;
}


div > button[prefix] ~ input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
div > button[suffix] ~ input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

<div>
  <input type="text" placeholder="Type here">
</div>

<div>
  <button prefix>P</button>
  <button suffix>S</button>
  <input type="text" placeholder="Type here">
</div>

<div>
  <button suffix>S</button>
  <input type="text" placeholder="Type here">
</div>


<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
</div>

Answer 2

Отвечая @Paulie_D, я понял, что действительно могу использовать :not с селектором :last-child: если ввод не последний дочерний элемент, то за ним действительно следует суффикс!

:root {
  --radius: 5px;
}

div {
  height: 36px;
  margin: 12px;
}

* {
  box-sizing: border-box;
}

input {
  height: 100%;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid #ccc;
  padding: 0 6px;
}

button {
  height: 100%;
  background: teal;
  border: 0;
  color: white;
}

button[prefix] {
  border-radius: var(--radius) 0 0 var(--radius);
}

button[suffix] {
  border-radius: 0 var(--radius) var(--radius) 0;
}


div > button[prefix] + input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

<div>
  <input type="text" placeholder="Type here">
</div>

<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>

<div>
  <input type="text" placeholder="Type here">
  <button suffix>S</button>
</div>


<div>
  <button prefix>P</button>
  <input type="text" placeholder="Type here">
</div>