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

Question

这是我需要做的事情的图片：

这是我的意见

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

但文件夹的图标不在输入之内。如何将垂直线和文件夹的图标放在里面？

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

Answer 2

通常通过以允许更复杂的呈现的方式组合许多HTML元素来创建这些组件。该图像中的输入框可能是通过组合多个divs，input，img以及可能还有其他精心设计的元素来创建的。

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

---

作为旁注，如果您对某个网站如何实现其组件感到好奇，那么弄清楚他们所做的事情的最佳方法是使用浏览器的开发人员工具来检查元素并查看元素的层次结构和样式结合在一起。

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