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

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   */
}

<强>段：

＆＃13;

＆＃13;

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   */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

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