How to add triangle to input[type='text']

Question

I want to add a small triangle to the upper-right corner of an input type='text' HTML element, like Excel uses to indicate a comment.

The accepted answer to this question:

How to add triangle in table cell

shows how to do it for a table cell. I naively applied the "note" css class to my input element but it didn't work. Any suggestions for how to achieve this?

3 downvotes; it would be helpful to add a comment to say what's wrong with the question. I thought it was clear enough what I want from the answer to the linked question without posting code. — Joe, Mar 31 '17 at 19:13

score 9 · Accepted Answer · edited May 23 '17 at 12:32

Pseudo elements can't be used on input's. You can use the same CSS as described in the linked post (here) but you would have to apply the class to an ancestor.

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

Fabrizio Calderan · Answer 2 · 2017-03-31T16:10:18.467

Given a simple input field

 <input type="text" />

and assuming we can't use or rely on a parent element for styling, you may use multiple box-shadow to create a triangle, e.g.

Codepen demo

Result (triangle outside)

Code

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

Of course you can change the size of the triangle playing with the offset(y/x) of the box-shadow.

If you need to place the triangle inside the input you could just add a couple of properties to the code above and use outline and outline-offset instead of the border property to create the illusion of an outer border. All the shadows don't move from their position, just give enough space to the offset in order to wrap them.

Codepen demo

Result (triangle inside)

Code

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

That's great +1. Only thing with this is that I guess the triangle has to be outside of the element. I'm not sure if this is what OP wants or not. great solution though. — Turnip, Mar 31 '17 at 11:36
to build on this answer... one could set the input to no border and wrap it in a div with a border, giving the triangle an appearance of being in the element. — kttii, Mar 31 '17 at 15:25
@Turnip I've just included the inner triangle version. it's easier than using a parent element :) — Fabrizio Calderan, Mar 31 '17 at 16:24

score 0 · Answer 3 · answered Oct 04 '19 at 10:49

To mark all text inputs with red corner, you could use

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

If you want to mark only required fields, then use required attribute and selector:

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

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

How to add triangle to input[type='text']

3 Answers3