如何将三角形添加到 input[type='text']？

Question

我想在一个 input type='text' 的HTML元素的右上角添加一个小三角形，就像Excel用于指示注释的方式。

这个问题的被接受答案展示了如何为表格单元格实现此效果。

如何在表格单元格中添加三角形

我尝试把“note”css类应用于我的输入元素，但它没有起作用。你有什么建议吗？

- Joe

---

请发布你的代码。 - Alex

3个反对票；添加一条评论以说明问题出在哪里会很有帮助。我认为，不需要发布代码，就可以清楚地了解我想从链接问题的答案中得到什么。 - Joe

点赞。问题和答案都很有用。 - udog

Answer 1

伪元素不能用于input。你可以使用与链接帖子中描述的相同的CSS（在这里），但是你必须将类应用于祖先元素。

.note {
    position: relative;
    display: inline-block;
}
.note:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0; 
    height: 0; 
    display: block;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-top: 20px solid #f00;
}

<div class="note">
  <input type="text">
</div>

- Turnip

Answer 2

给定一个简单的输入框

 <input type="text" />

假设我们不能使用或依赖于父元素进行样式设置，您可以使用多个box-shadow来创建三角形，例如：

Codepen演示

---

结果（三角形在外部）

---

代码

input {
  padding: 10px;
  border: 1px #ccc solid;
  margin: 15px;
  box-shadow: 0 -12px 0 #fff, 12px 0px 0 #fff, 
              1px -12px 0 #fff, 2px -11px 0 #fff, 
              3px -10px 0 #fff, 4px -9px 0 #fff, 
              5px -8px 0 #fff, 6px -7px 0 #fff, 
              7px -6px 0 #fff, 8px -5px 0 #fff, 
              9px -3px 0 #fff, 10px -2px 0 #fff, 
              11px -1px 0 #fff, 12px 0 0 #fff, 
              8px -12px 0 #9bc;
}

当然，您可以通过调整盒子阴影的偏移量（y/x）来更改三角形的大小。

如果您需要将三角形放在输入框内，只需向上述代码添加一些属性，并使用outline和outline-offset代替border属性创建外边框的幻象。所有的阴影都不会从它们的位置移动，只需给予足够的偏移空间来包裹它们。

Codepen演示

---

结果（三角形内部）

---

代码

input {
   padding: 0;
   border: 0;
   outline: 1px #ccc solid;
   outline-offset: 15px;  
   ...
}

- Fabrizio Calderan

---

太好了，+1。唯一的问题是我猜三角形必须在元素外面。我不确定这是否是 OP 想要的。不过解决方案很棒。 - Turnip

令人印象深刻的回答。 - Abhishek Pandey

啊，是的。不过我可不想维护那段代码；p - Turnip

要在此答案的基础上进行改进...可以将输入设置为无边框，并将其包装在带有边框的div中，使三角形看起来像在元素中。 - kttii

@Turnip 我刚刚加入了内部三角形版本。这比使用父元素要容易 :) - Fabrizio Calderan

Answer 3

要将所有文本输入框标记为红色角落，您可以使用以下代码：

textarea, input[type="text"], input:not([type]) {
  background: linear-gradient(225deg, red 5px, white 5px);
}

如果您想标记必填字段，可以使用required属性和选择器：

[required] { background: linear-gradient(225deg, red 5px, white 5px); }

<input placeholder="optional field">
<input placeholder="mandatory field" required>

- Jan Turoň