如何在输入元素上创建具有不同 colors 和宽度/高度的重叠边框？

Question

我目前正在使用 vue.js 拖放 web 应用程序。在这个应用程序中，我们在输入 HTML 元素上有一些特殊设计的边框。

设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）

我尝试过类似创建兄弟 div 并使其比输入大一点的方法，在输入后面使用 z-index 设置它并设置颜色。 但问题是浅蓝色的border-right和border-left总是会占据100%的高度。 我需要 75% 或 80% 之类的东西。

“重叠”边框也可以位于元素的顶部、右侧或左侧

有没有人知道解决这个问题的最佳方法？

Answer 1

带有渐变的边框图像是您所需要的：

 input { border:2px solid; padding:10px; background:pink; }.one { border-image:linear-gradient(to right, red 80%,blue 0) 2; }.two { border-image:linear-gradient(to bottom,red 70%,blue 0) 2; }

 <input type="text" class="one"> <input type="text" class="two">

Answer 2

您可以使用:after 和:before 来覆盖剩余 20% 的边框。

<div><input value="Text"/></div>

CSS：

input {
  padding:20px;
  border: 5px solid lightblue;
  border-bottom: 5px solid gray;
  position:relative;
  display:block;
}
div:before {
  content:' ';
  width:5px;
  height: 14px;
  background:gray;
  position:absolute;
  display:block;
  bottom:0;
  left:0;
  z-index:999;
}
div:after {
  content:' ';
  width:5px;
  height: 14px;
  background:gray;
  position:absolute;
  display:block;
  bottom:0;
  right:0;
  z-index:999; 
}
div {position: relative;width:fit-content;}

参见示例： https://codepen.io/MistaPrime/pen/XWryOOy

Answer 3

我可能会设置包装元素的样式并在其上添加伪元素。

https://codepen.io/slackday/pen/wvwQOvq

<html>
  <head>
    <title>How to create a overlapping border with different colors and widths / heights on a input element?</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .site {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .input-wrapper {
      position: relative;
    }

    .input-wrapper::before,
    .input-wrapper::after {
      height: 20%; /* adjust height of how much it should overlap */
      width: 1px; /* same width as your input border */
      position: absolute;
      bottom: 0;
      z-index: 1;
      content: '';
      background-color: #ccc; /** same color as bottom border */
    }

    .input-wrapper::before {
      left: 0;
    }

    .input-wrapper::after {
      right: 0;
    }

    input {
      border: solid 1px aqua;
      border-bottom: solid 1px #ccc;
      position: relative; /* to position psuedo elements ::before, ::after */
      padding: 1rem;
      font-size: 16px;
      line-height: 1;
    }

    input:focus {
      outline: none;
    }
  </style>
  <body>
    <main class="site">
      <div class="input-wrapper">
        <input type="text" value="text" placeholder="Aorta" />
      </div>
    </main>
  </body>
</html>

如何在输入元素上创建具有不同 colors 和宽度/高度的重叠边框？

问题描述

3 个解决方案

解决方案1
5 已采纳

解决方案2
0 2019-09-20 15:39:24

解决方案3
0 2019-09-20 15:46:11

如何在输入元素上创建具有不同 colors 和宽度/高度的重叠边框？

问题描述

3 个解决方案

解决方案1 5 已采纳

解决方案2 0 2019-09-20 15:39:24

解决方案3 0 2019-09-20 15:46:11

解决方案1
5 已采纳

解决方案2
0 2019-09-20 15:39:24

解决方案3
0 2019-09-20 15:46:11