Partial vertical borders on form input

问题

GOAL:
I am trying to create partial vertical borders on a form input. The desired effect is the following:

PROBLEM:
Pseudo before and after elements are not permitted for inputs so this is not an option. Alternatively, using height to limit the size of the input with border left and right cuts off the text.

LIMITS:
No extra HTML elements or images can be used, this has to work using just CSS.

POSSIBLE SOLUTIONS:
I tried to create a gradient border with limited steps but was unable to configure it for individual border sides.

CURRENT CODE:

    input[type="text"], input[type="number"], input[type="email"], textarea {
        width: 100%;
        border-radius: 0;
        padding: 0 $size-xs;
        margin: 0;
        margin-bottom: $size-m;
        text-overflow: ellipsis;
        border: 0;
        border-bottom: 1px solid $clr-darker;
        display: block;
     }

回答1:

You can go with gradient for each side like this:

input {
 border:none;
 padding:10px;
 background:
   /* Bottom side*/
   linear-gradient(#000,#000) bottom      /100% 2px ,
   /* Left side */
   linear-gradient(#000,#000) bottom left /2px 10px,
   /* Right side */
   linear-gradient(#000,#000) bottom right/2px 15px;
 background-repeat:no-repeat;
}

<input type="text" placeholder="text">

来源：https://stackoverflow.com/questions/48662420/partial-vertical-borders-on-form-input