Question

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

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

Answer 1

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

Answer 2

为什么不建立在Bootstrap中已有的.has-feedback样式？

＆＃13;

.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%)
}

＆＃13;

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

＆＃13;

Answer 3

只需添加以下css，然后在标记中添加的html部分（“类名 - 右侧”）中的<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

如何使输入字段上的图标响应

3 个答案: