使用前缀/后缀输入，而不是先前的同级选择器答案

【问题标题】：Input with prefix/suffix, NOT with previous sibling selector使用前缀/后缀输入，而不是先前的同级选择器
【发布时间】：2019-10-07 18:31:12
【问题描述】：

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

单独，输入四舍五入
带有前缀 (resp. suffix) 的左侧 (resp. right) 边是圆角的，而不是右侧 (resp. left) 边
同时使用前缀和后缀，输入根本不会四舍五入（按钮是四舍五入的）

我已经设法处理了前缀元素，但我似乎找不到一个 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>

【问题讨论】：

这不是以前的兄弟问题...这正是您要问的？
正如你已经提到的，没有previous sibling selector。如果您只是向父级添加一个类，这可能是最简单的，具体取决于场景（with-suffix 和/或with-prefix）。您根本无法通过其后面的元素来选择一个元素（反之亦然）。
@Paulie_D 因为如前所述，我正在其他两种情况下（使用父容器）寻找灵感，因为我似乎找不到解决方案。前面的兄弟选择器是许多可能的解决方案之一，而不是唯一的一个！
@ssc-hrep3 我正在使用 JS 框架，输入将被封装到父容器中，例如 <form-field>。目前，由于 JS，我能够对输入进行四舍五入，但我认为它仅在 CSS 中可行，无需使用其他类，只需选择器。
@Paulie_D 说的很大胆。我考虑了您的反馈，但也许其他人可能已经解决了这个问题（例如，使用容器）而您不知道？

标签： html css css-selectors

【解决方案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>

【讨论】：

我喜欢第二个！对于第一个，不幸的是它取决于背景，这意味着我必须使用 JS 来获取父颜色并使其成为动态（或有一个奇怪的着色问题）
@trichetriche 不需要 JS，您仍然可以像使用半径一样使用 CSS 变量作为背景；)
那太好了，不幸的是我正在创建 Web 组件，所以它们应该是独立的，如果使用变量，这意味着用户必须自己设置伪元素的样式：/
@tricheriche 会以透明的想法进行编辑，等等；)
@trichetriche 没关系，你已经找到了一个没有 not() 选择器的好解决方案，不需要更老套的方法

【解决方案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>

【讨论】：

你也可以对第一个孩子做同样的事情jsfiddle.net/es3b0tfx