Question

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

这个问题的接受答案：

显示了如何为表格单元格执行此操作。我天真地将“note”css类应用于我的输入元素，但它不起作用。有关如何实现这一目标的任何建议吗？

Answer 1

伪元素can't be used on input's。您可以使用链接帖子（here）中描述的相同CSS，但您必须将该类应用于祖先。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

给出一个简单的输入字段

 <input type="text" />

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

Codepen demo

结果（外面的三角形）

<强>代码

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;
}

当然，您可以使用box-shadow的偏移量（y / x）更改三角形的大小。

如果您需要将三角形放在输入中，您只需在上面的代码中添加几个属性，然后使用outline和outline-offset代替border属性来创建外边界的幻觉。所有阴影都不会从它们的位置移开，只需为偏移提供足够的空间以包裹它们。

Codepen demo

结果（里面的三角形）

<强>代码

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

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>

如何在输入中添加三角形[type ='text']

3 个答案: