如何在输入字段内绘制垂直线？答案

【问题标题】：How to draw a vertical line inside an input field?如何在输入字段内绘制垂直线？
【发布时间】：2018-01-16 23:16:47
【问题描述】：

这是我需要做的图片：

这是我的输入

  <input type='text'
    id='c-start-retro-form-retroname'
    className='u-margin-bottom-tiny u-margin-top-tiny u-1/1'
    placeholder={'Retrosopective name'}
    onChange={this.handleRetrospectiveNameChange}>
  <i className='fa fa-folder'></i>

但文件夹的图标留在输入之外。如何在里面放一条竖线和文件夹的图标？

【问题讨论】：

欢迎来到 Stack Overflow，您的问题应包含a Minimal, Complete, and Verifiable example。
你可以在这里得到一个想法：stackoverflow.com/questions/48270694/… 使用线性渐变

标签： css input styles

【解决方案1】：

添加这些样式：

i.fa-folder {
  transform: translatex(calc(-100%)); /* move left the icon's width */
  border-left: 1px solid black;       /* add the border             */
  padding: 0 7px;                     /* left and right padding     */
}

input {
  padding-right: 2em;                 /* prevent typing over icon   */
}

片段：

i.fa-folder-open {
  transform: translatex(calc(-100%)); /* move left the icon's width */
  border-left: 1px solid black;       /* add the border             */
  padding: 0 7px;                     /* left and right padding     */
}

input {
  padding-right: 2em;                 /* prevent typing over icon   */
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
  <input
    type='text'
    id='c-start-retro-form-retroname'
    className='u-margin-bottom-tiny u-margin-top-tiny u-1/1'
    placeholder='Retrosopective name'
  />
  <i class="fa fa-folder-open"></i>

【讨论】：

【解决方案2】：

这些组件通常是通过组合大量 HTML 元素以允许更复杂的演示的方式创建的。该图像中的输入框可能是通过组合多个divs、input、img 以及可能其他经过精心设计的元素创建的。

有各种库可以帮助您创建这样的组件。例如查看Semantic UI。查看他们的input components 列表，您会发现各种风格与您的想法相似。这个看起来很接近：

附带说明，如果您对某个网站如何实现其组件感到好奇，了解他们所做的最佳方法是使用浏览器的开发者工具进行检查元素并查看组合在一起的元素的层次结构和样式。

例如，如果您使用 Chrome，右键单击网页上的任何组件，单击 Inspect，您将看到该组件的 HTML 和 CSS 代码以及所有嵌套在其中的元素。例如，我上面建议的语义 UI 输入组件是使用封闭的 div 创建的，并在其中嵌套了一个 input 和另一个 div：

【讨论】：