表单输入中的部分垂直边框 [英] 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:

问题：


不允许在输入前后使用伪元素，因此这不是一种选择。或者，使用height限制带有左右边框的输入的大小，会截断文本。

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.

限制：


无法使用额外的HTML元素或图像，只能使用CSS来工作。

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.

当前代码：

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

推荐答案

您可以使用渐变每边都这样：

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

这篇关于表单输入中的部分垂直边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！