Question

我正在尝试使用前缀和后缀元素进行输入：

单独输入是四舍五入的
带有前缀（后缀）的左侧（分别为右）是圆角的，但不是右侧（即左侧）是圆角的
带有前缀和后缀的输入根本不会四舍五入（按钮是四舍五入的）

我设法处理了prefix元素，但是我似乎找不到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>

带前缀/后缀的输入，不带先前的兄弟选择器

2 个答案: