如何使输入字段顶部的图标响应答案

【问题标题】：How to make icon on top of input field responsive如何使输入字段顶部的图标响应
【发布时间】：2017-05-31 00:22:02
【问题描述】：

我在让我的图标固定在输入字段的右上角以响应时遇到问题。我希望能够使其适应各种屏幕尺寸。我目前有以下代码：

HTML：

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <form class="form-class">

    <div class="form-group">
        <label>
        <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
        <span>Username</span>
      </label>
      <input type="text" class="form-control" name="name" placeholder="Username">
    </div>
    </form>
</head>
<body>

</body>
</html>

CSS：

    .form-class input {
        width: 70vw;
        @media all and (min-width: 768px) {
          width: 30vw;
        }
        @media all and (min-width: 1200px) {
          width: 25vw;
        }
    }

    .form-class label {
        position: relative;
        font-size: 2rem;
        @media all and (min-width: 768px) {
          font-size: 3rem;
        }

    }

   .form-class label .fa-exclamation-circle  {
              position: absolute;
              font-size: 0.7em;
              color: red;
              top: 28px;
              left: 427px;
              @media all and (min-width: 375px) {
                left: 255px;
              }
              @media all and (min-width: 768px) {
                top: 35px;
                left: 295px;
              }
              @media all and (min-width: 1440px) {
                top: 35px;
                left: 350px;
              }
}

上述方法效果不佳，因为我只针对非常特定的屏幕尺寸。在这里使用绝对定位是正确的方法还是有更好的方法？如何让感叹号图标在所有屏幕尺寸下都能响应？

现场演示可以在这里找到：https://jsbin.com/kixiliduju/1/edit?html,css,output

【问题讨论】：

你要在里面还是外面？
@banzomaikaka 我想要一半在里面，一半在外面，就像在演示中一样。
这行得通吗？ jsbin.com/tujihisare/edit?html,css,js,output
是的，效果很好。

标签： html css responsive

【解决方案1】：

您的意思是在搜索框上添加类似于清除按钮的内容？所以你可以试试这个How do I clear a search box with an 'x' in bootstrap 3?

【讨论】：

【解决方案2】：

为什么不在 Bootstrap 中已有的 .has-feedback 样式基础上构建呢？

.form-group {
  /* define width of input field / label;
     override for other resolutions as necessary */
  width: 70vw;
}

/* define form-group label font size */
.form-group > label {
  font-size: 2rem;
}

/* override default .form-control-feedback colour;
   NB: radial-gradient ensures middle of icon will always show as white,
       otherwise it's possible to see part of the input field through
       the icon */
.has-feedback label ~ .form-control-feedback::before {
  color: red;
  background: radial-gradient(ellipse 40% 40% at 50% 50%, #fff 0%, #fff 99%, transparent 100%)
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <form class="form-class">

    <div class="form-group has-error has-feedback">
      <label class="control-label" for="name">Username</label>
      <input type="text" class="form-control" name="name" placeholder="Username" id="name" aria-describedby="name_status">
      <span class="fa fa-exclamation-circle form-control-feedback" aria-hidden="true"></span>
      <span id="name_status" class="sr-only">(error)</span>
    </div>

  </form>
</head>

<body>

</body>

</html>

【讨论】：

【解决方案3】：

只需在 css 下方添加一个类，并在我在您的标记中添加的 html 部分 ("class name - rightSide") 中的 <i class="fa fa-exclamation-circle rightSide" aria-hidden="true"></i> 添加一个类。

.form-group {
  position:relative;
}
.rightSide {
  position:absolute;
  right:10px;
  top:20px;
  color:red;
}

删除 form-class 表单 HTML 部分。

  <form>
    <div class="form-group">
        <label>
        <i class="fa fa-exclamation-circle rightSide" aria-hidden="true"></i>
        <span>Username</span>
      </label>
      <input type="text" class="form-control" name="name" placeholder="Username">
    </div>
  </form>

这是工作小提琴

fiddle update

【讨论】：